Scroll a CSS background when user scrolls the webpage - parallax?

Question

I've got a page I built - it has a small section where I include links to my social sites.

That section currently has a nice background out of CSS - but what I would like is for that background to 'scroll', while the user scrolls up or down the sites page.

This is a parallax effect - but I'm not sure if this can even be done with a CSS background.

I've tried a few tutorials here or there online without any success.

I created a codepen on the basics of what I have

But here is my HTML:

<div id="social-row">
  <div id="para-social-bg">
    <div class="social-icons" id="para-social-shadow">
      <h4>SOCIAL STUFF</h4>
        <ul>
          <li><a href="mytwitter" title="http://www.mytwitter.com" class="icon-social twitter">Twitter</a></li>
          <li><a href="http://www.myfacebook.com" title="me on Facebook" class="icon-social facebook">Facebook</a></li>
          <li><a href="http://www.myblog.com" title="my news" class="icon-social atom">Blog feed</a></li>
          <li><a href="http://www.myinstagram.com" title="me on Instagram" class="icon-social instagram">Instagram</a></li>
      </ul>
    </div>
  </div>
</div>

...and my CSS:

#para-social-bg {
background-color: #6d695c;
background-image:
repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
background-size: 70px 120px;  
}

#para-social-shadow {
box-shadow:         inset 0 6px 10px -9px rgba(0,0,0,0.8),
                    inset 0 -6px 10px -9px rgba(0,0,0,0.8);
-moz-box-shadow:    inset 0 6px 10px -9px rgba(0,0,0,0.8),
                    inset 0 -6px 10px -9px rgba(0,0,0,0.8);
-webkit-box-shadow: inset 0 6px 10px -9px rgba(0,0,0,0.8),
                    inset 0 -6px 10px -9px rgba(0,0,0,0.8);
  }

Ultimately I just need the argyle styling to 'scroll' vertically as the user scrolls down the page (but at a slower speed than the user is scrolling the page - so it appears to be 'behind' the other sections above and below it).

Any thoughts? Open to all ideas - CSS, JS, JQUERY - whatever.

CSS would be optimal, JS can be done without worry.

gopalraju · Accepted Answer · 2015-05-29 19:07:12Z

2

This can be done with javascript:

$(window).scroll(function(){
  $("#para-social-bg").css({"background-position":"left " +($(window).scrollTop()*.5) + "px"})
});

http://codepen.io/anon/pen/qdRjXJ

answered May 29, 2015 at 19:07

gopalraju

2,3091 gold badge14 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Adam · Accepted Answer · 2015-05-29 18:51:21Z

0

This would do the trick:

body { 
    background-image: url('image.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
}

I'm not sure if it will move at a slower speed or not. But this allows your background to scroll the scroll of the browser.

answered May 29, 2015 at 18:51

Adam

2,44021 silver badges30 bronze badges

5 Comments

samrap Over a year ago

This does not create a 'true' parallax effect. Although it does keep the image in position as the other content scrolls, I think the OP is looking for a solution that makes it scroll slower than the other content.

Adam Over a year ago

Thanks for the feedback. I'll take a gander for that. I've never heard of that though, unless you had a .gif that made it seem like it was moving slower.

Hanny Over a year ago

This is correct - also - I'm not using an image as a background. My background is created via CSS. It appears to make a difference.

Adam Over a year ago

Are you using a linear gradient to create your background? @Hanny

Hanny Over a year ago

Yes - as per the CSS above.

samrap · Accepted Answer · 2015-05-29 18:53:21Z

0

I use StellarJS, it is a relatively lightweight and feature-rich JQuery plugin for adding parallax effects to backgrounds and even divs and other elements. It is as easy as adding a data attribute to your HTML tag and then running the Stellar object on the window. It does require JQuery to be included with your website, but it is likely you are using JQuery already. For more information and demos, check it out here

answered May 29, 2015 at 18:53

samrap

5,6735 gold badges34 silver badges56 bronze badges

Comments

Bytesized · Accepted Answer · 2015-05-29 18:56:42Z

0

Along with what everyone else has said, here is a tutorial that uses javascript html and css to get the parallax effect when scrolling

http://www.kirupa.com/html5/smooth_parallax_scrolling.htm

answered May 29, 2015 at 18:56

Bytesized

1431 silver badge15 bronze badges

4 Comments

Hanny Over a year ago

It would appear that tutorial uses an image as a background. I'm using CSS as my background - that's where I'm getting hung up I believe.

Bytesized Over a year ago

It may be better for you to use an image rather than CSS.

Hanny Over a year ago

drats. Trying to cut down on loading images and such. Back to the drawing board I guess.

Bytesized Over a year ago

Here is a tutorial on pure css parallax keithclark.co.uk/articles/pure-css-parallax-websites

Samurai · Accepted Answer · 2015-05-29 19:26:48Z

0

Let's say your background (#bg) is a fixed element with top: 0; on load and a lower z-index than the rest of elements. You get the scrolTop and then give the background a negative top, but with a smaller number:

jQuery:

$(window).scroll(function() {
    var scrl = $(window).scrollTop();
    $('#bg').css('top', -scrl/20);
});

I just put 20, if it's too fast you can increase it and vice versa.

CSS:

#bg {
    position: fixed;
    top: 0;
    left: 0;
    background-image: url("BACKGROUND_URL");
    background-repeat: repeat;
    height: 2000px;
    z-index: -100;
}

jsfiddle DEMO

edited May 29, 2015 at 19:26

answered May 29, 2015 at 19:07

Samurai

3,7295 gold badges29 silver badges41 bronze badges

Collectives™ on Stack Overflow

Scroll a CSS background when user scrolls the webpage - parallax?

5 Answers 5

Comments

5 Comments

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

5 Comments

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related