Menu
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?
440
The background-size CSS property sets the size of the element's background image. The image can be left to its natural size, stretched, or constrained to fit the available space.
cover tells the browser to make sure the image always covers the entire container, even if it has to stretch the image or cut a little bit off one of the edges. contain , on the other hand, says to always show the whole image, even if that leaves a little space to the sides or bottom.
Pretty sure background-size: cover; means the image will fill the element while maintaining its aspect ratio, while background-size: 100%; will just make the image fill 100% width of the element.
The background-position CSS property sets the initial position for each background image. The position is relative to the position layer set by background-origin .
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%;
140
You can use:
background-position: center bottom; If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
