Is there a way using only CSS to have a background image scroll within a fixed element?

Question

I have two fixed elements with a background image that I want to have scroll with the page, without the element scrolling. Here's the jsfiddle: http://jsfiddle.net/3s3qu2yv/

Is there a way to accomplish this in pure CSS? I know there is a way to do this is javascript but I'd like to avoid that if possible.

score 0 · Answer 1 · answered Nov 25 '14 at 01:25

0

Not sure what you are asking here. It looks like you have already accomplished this in your fiddle.

Otherwise background as a background-attachment attribute that makes it scroll along with an element.

This is commonly used in parralax sites.

answered Nov 25 '14 at 01:25

Ucinorn

648
7
21

I don't want it to scroll with the element the background is within, but with the page. – invot Nov 25 '14 at 20:27

score 0 · Accepted Answer · answered Jan 24 '15 at 00:32

There is not a way to do this with just CSS, you will need JavaScript. THIS jQuery to be exact:

http://jsfiddle.net/3s3qu2yv/4/ -- updated to better illustrate the effect I'm going for.

function scr() {
   var scrolled = $(window).scrollTop();
   $('.fx').css('background-position', 'center -' + scrolled + 'px');
}

$( document ).ready(function() {
   $(window).scroll(function(){
      scr();
   });
});

A fixed element's background cannot scroll with the page, regardless if the background-attachment is set to fixed or scroll because the element itself does not move.

Is there a way using only CSS to have a background image scroll within a fixed element?

2 Answers2