CODEWITHSUNDEEP
htmlcssbackground-imagebackground-attachment
Kalzem
Kalzem

Reputation: 7501

how to background-attachement: fixed to a div not viewport

I have a large background cover.

<div id="cover">
    ...
</div>

And the CSS

#cover {
    background:url('cover.jpg') no-repeat fixed center center / cover;
    height: 350px;
    width: 100%;
}

The expected output : The background image, resized to 350px x 100% (in my case 350x900), should have a scroll effect based on the <div id="cover"></div>.

The actual output : The background image, resized to viewport (in my case 1440x900), has a scroll effect based on <html></html>.

What I want is for background-attachement:fixed to be relative to the div not the viewport.

Upvotes: 1

Views: 944

Answers (1)

Victor D.
Victor D.

Reputation: 141

Background images are by default "fixed" to the element they are attached to. When you set a background CSS property to fixed, it does the same it would do for a DOM element, it makes it fixed regarding the whole document (viewport).

Changing the fixed property to scroll should do the trick here:

background:url('cover.jpg') no-repeat scroll center center / cover;

Upvotes: 1

Related Questions