1

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.

Kalzem
  • 7,320
  • 6
  • 54
  • 79
  • 1
    That is not possible, `fixed` is always in regard to the viewport, that is how it is specified. Depending on what you actually want to achieve (not sure what you actually mean by _“What I want is for background-attachement:fixed to be relative to the div not the viewport”_) there might be workarounds. – CBroe Aug 27 '14 at 13:43
  • I am looking for a 'parallax' effect from the fixed attachement (with pure CSS3). Something like the new Twitter cover effect. Oh and something NOT laggy as most of the parallax stuff out there. – Kalzem Aug 27 '14 at 13:50
  • Not really understanding what your asking here, but if you're looking for CSS only parallax you should check this out: http://blog.keithclark.co.uk/pure-css-parallax-websites/?utm_source=dlvr.it&utm_medium=twitter – hal Aug 27 '14 at 14:10

1 Answers1

1

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;
Victor D.
  • 141
  • 9