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?
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%;
您可以使用:
background-position: center bottom;
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.