How do I keep the background image fixed during a page scroll? I have this CSS code, and the image is a background of the body and not <div></div>
body { background-position:center; background-image:url(../images/images5.jpg); }
Definition and UsageThe background-attachment property sets whether a background image scrolls with the rest of the page, or is fixed.
To actually have scroll-able images, you need to give it a width - or in this case- height larger than your viewport. Giving the div a specific width and height will allow for scroll, but when viewing the page on a screen with a different resolution, the width of the image will be off.
The background-attachment CSS property sets whether a background image's position is fixed within the viewport, or scrolls with its containing block.
background-attachment: fixed;
http://www.w3.org/TR/CSS21/colors.html#background-properties
background-image: url("/your-dir/your_image.jpg"); min-height: 100%; background-repeat: no-repeat; background-attachment: fixed; background-position: center; background-size: cover;}
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