Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Keep background image fixed during scroll using css

Tags:

css

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); } 
like image 440
X10nD Avatar asked Apr 18 '10 11:04

X10nD


People also ask

How do you set the background-attachment property whether a background image is fixed or scrolls with the rest of the page?

Definition and UsageThe background-attachment property sets whether a background image scrolls with the rest of the page, or is fixed.

How do I make my background image scroll in CSS?

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.

What CSS property is use to set the background image to fixed or scrolls with the page?

The background-attachment CSS property sets whether a background image's position is fixed within the viewport, or scrolls with its containing block.


2 Answers

background-attachment: fixed; 

http://www.w3.org/TR/CSS21/colors.html#background-properties

like image 181
Quentin Avatar answered Sep 20 '22 00:09

Quentin


background-image: url("/your-dir/your_image.jpg"); min-height: 100%; background-repeat: no-repeat; background-attachment: fixed; background-position: center; background-size: cover;} 
like image 22
Chris Walter Avatar answered Sep 18 '22 00:09

Chris Walter