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?

Answer 1

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%;

Answer 2

You can use:

background-position: center bottom;

Answer 3

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.