CSS background-size cover and background-position

Question

HTML:

#backgroundproduct {
  position: fixed;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
  z-index: 12;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: top;
}

<div id="backgroundproduct" style="background-image: url(http://example.com/example.jpg)">

I'm using a images as a background image, only the lower part of the image is more important than the top.

How can I make the background go up a little?

background-position can accept two pixel or percent based numbers. — Mohsen, Dec 18 '12 at 00:40

Stéphane Bruckert · Accepted Answer · 2012-12-18T00:45:07.497

48

If the bottom is more important: background-position: bottom;

background-position also allows percentage values: 0% 0%; by default.

The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%.

You should try background-position: 0% -10%;

edited Dec 18 '12 at 00:45

answered Dec 18 '12 at 00:40

Stéphane Bruckert

21,706
14
92
130

thank you fixed it i was just thinking wrong. And is there a way to "zoom out" so you see more of the picture ? – Ivo Dec 18 '12 at 00:45
2

Yes, you could use `background-size` with percentages. http://www.w3schools.com/cssref/css3_pr_background-size.asp – Stéphane Bruckert Dec 18 '12 at 00:47
thank you some times its just hard to find when you don't know were your looking for – Ivo Dec 18 '12 at 00:50
How can you only specify one value? – Adam Aug 08 '17 at 22:51
Such as `background-position: 20%;` it would mean `background-position: 20% 50%;` – Stéphane Bruckert Aug 09 '17 at 11:41

score 10 · Answer 2 · edited Aug 24 '17 at 03:44

10

You can use:

background-position: center bottom;

edited Aug 24 '17 at 03:44

Community

1
1

answered Dec 18 '12 at 00:40

vivek

1,944
1
17
26

oke that's just stupid of my not thinking about this. thanks! – Ivo Dec 18 '12 at 00:45
You can use background-size: contain; to fit the background in div. Though, the image may look disproportionate because stretching may occur. This is a CSS3 property though. – vivek Dec 18 '12 at 00:50
2

`background-size: contain` maintains the bitmap's original aspect ratio – pmont Dec 24 '15 at 17:45
@pmont, but it doesn't cover the whole parent element. – Khom Nazid Sep 14 '19 at 16:58
Try `background-size: cover`. That's what I've used to cover the entire parent background. It stretches the bitmap if necessary while maintaining the original aspect ratio. – pmont Sep 16 '19 at 03:09

score 2 · Answer 3 · answered Jul 10 '13 at 13:35

2

Just to be clear, background-position percentages are calculated against BOTH the image and the background container. So, background-position: 25% 25%; would find the 25% point for both X and Y on the background container and align the image's 25%,25% point on top of that point.

answered Jul 10 '13 at 13:35

m b

168
1
1
7

If I specify pixel values,(x, y), will it find the (x, y) position on the image and set it to the containers (50%, 50%) position? – marcopolo Dec 29 '13 at 00:34

CSS background-size cover and background-position

3 Answers3

Linked