Search code examples
htmlcssbackground-imageparallax

How do I use CSS to give a section a background that doesn't scroll with the page?

I can't figure out what is being used to achieve the parallax effect here: www.alwayscreative.net (the bottom part, "We are inspired..." ect.)

I'm trying to do something similar on my own portfolio site. Here's the CSS in question (which closely mirrors their own as of the moment):

.plx-bg1 {
background: transparent url(../img/plx-bg.jpg) no-repeat 0 0;
color: #fff;
max-height: 980px;
padding: 25% 0;
text-align: center;
text-transform: uppercase;
width: 100%;
margin-top: 50px;}

.multiplebgs .plx-bg1 {
background-image: url(../img/plx-seperator.png), url(../img/plx-seperator-bottom.png), url(../img/plx-bg.jpg);
background-position: 0 0, 0 bottom, center bottom;
background-repeat: repeat-x, repeat-x, no-repeat;
background-size: auto auto, auto auto, cover!important;}

I seem to be able to get a parallax effect by adding 'fixed' to the plx-bg1 background class (or with different CSS) but I cannot get it to work in conjunction with the multiplebgs class and the borders on top and bottom as they have done (which is really cool) as adding a 'fixed' property breaks it, and that is obviously not how they have done it....

Looking through the code on their site I can't for the life of me figure out where or what exactly they're using to make the actual parallax effect work?

Solution

  • Notice that they also have this in their CSS, which you've left out:

    .inspiration {
    background-attachment: scroll,scroll,fixed;
}

    Perhaps you missed it because it's held within a media query.