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


Tags: html,css,background-image,parallax

Problem :

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.


    CSS Howto..

    Wordpress plugin: How to depend on other plugins?

    How to change css href=“” using javascript? [duplicate]

    Design Issue: How to design a webpage that should show 11 elements with a description for each elements? [closed]

    HTML/CSS: How to get the id of sub menu

    CSS position: absolute - understanding how to center text inside a div box

    How to make a rollover div clickable?

    how to change the selecting background color

    How to Style this table-like structure

    How can I make DIV 100% height of browser without vertical scrolling of header

    How do I style DIVs inside a checkbox label based on if it is checked or not?

    Hiding the content of a
    and showing another
    with different contents

    How to use overflow-y:auto with child with bottom: 0 and position:absolute?

    how to make the entire form (input and submit button) change border color on focus (bootstrap 3)

    How to show Div after a Specific time of page load?

    How to display background-image on entire site

    How to avoid an hover on a menu item to affect the menu items on the right

    How do I update an div css to display an complete image when section is complete?

    css/jquery - how to hide last row of floated elements if not even

    How to apply focus css for all drop downs?

    How to hover over the whole button in css

    How to add composite css -webkit-mask-image?

    How do I get a div to fill the width regardless if the brower window is shrunk?

    How can I make a CSS glass/blur effect work for an overlay?

    How to create a button with a CSS-animated background?

    How to have a backgroud image 100% width / height inside a
  • ?
  • Responsive website - how to debug a non-responding responsive css?

    How do you use csslint from the command line?

    How to use fadeTo, etc. animation tags along with a css change statement in jquery?

    how to align right hand side image on top of text on mobile screen

    How to use HTML-CSS on outputting data conditionally?