alternate fixed scroll backgrounds
June 27, 2014 | 105 Feedbacks

Alternate Fixed & Scroll Backgrounds

How to create alternate fixed and scroll backgrounds with no javascript, but just the help of the CSS background-attachment property set on Fixed.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera
9+

These days we see a lot of parallax effects in web projects. You can achieve some dynamic results with CSS only, without affecting the website performance. Unless you have to use parallax on background images to make your client happy – which sometimes happens.  All you need to learn is how the CSS background-attachment property works. Let’s build this snippet together ;)

Demo images from Unsplash.

Creating the structure

The HTML is quite basic: we alternated <div> elements with a .cd-fixed-bg class – used for the sections with fixed backgrounds – with divs with a .cd-scrolling-bg class – used for the sections with plain backgrounds.

Adding style

When I was thinking about how to achieve this effect, my first thought was to play with jQuery: maybe I should create a <div> in position fixed, and use it to change the background image while the user scrolls. Felt too complicated though. I hadn’t considered the Fixed value of the CSS background-attachment property. By default the background-attachment value is Scroll, meaning that the background scrolls along with the element. BUT if you set it to be Fixed, the background behaves as a fixed positioned element: it moves with regards to the viewport.

That’s it! Few lines of CSS and we have a nice template suitable for long one-page designs ;)

Changelog

Jun 27, 2014
  • Resource released by CodyHouse

Sebastiano Guerriero

UI/UX designer, with a huge passion for Nutella. Co-Founder of CodyHouse. You can follow him on Twitter or Dribbble.

  • http://www.benkoca.com Ben Koca

    This is fantastic, can’t wait to try it out.

  • http://www.kheme.tk/ Okiemute Omuta

    just amazing

  • Md Abdul Momin

    I am regular visitor for this site, helpful tutorials & coding

  • RIRIKA

    thanks a lot for this cool tip.

    But I came across a queer behavior in my Chrome & FireFox (MacOSX).
    When I set browser’s width less than about 1100px and tried this page,
    the “cd-fiexed-bg” sections scroll to associate with user’s page scrolling.
    And when I set its width more than that, this page works very decently.

    I’m very happy to have your advice about this. thanks , ririka

    • Sebastiano Guerriero

      Hi RIRIKA, I found out the “background-attachment: fixed” doesn’t work on most mobile browsers. The best solutions seemed to disable it and let the image scroll on touch devices. Since on our resources we use only 3 breakpoints (>1200px to target desktop devices) you see no fixed effect at 1100px. Just change/add new breakpoints if you want the effect to be visible around 1100px wide devices.

      http://stackoverflow.com/questions/20443574/fixed-background-image-with-ios7

      • RIRIKA

        thank you very much to come back so soon,
        and the point about “breakpoints”, very helpful

      • Anton

        What means that bg-fixed doesn’t work on most mobile browsers: does it break the whole design or what happens?

        I am looking for a solution where I can use your template but with “always fixed background” on non-mobile-devides.

        Maybe browser-detection could be a solution.

        Have some tipps?

        Thanx Sebastian, for this great stuff.

        • http://codyhouse.co/ Sebastiano Guerriero

          Hey Anton, when we tried the “background-attachment: fixed” on mobile devices, the background-size:cover was no longer working, also the images were blurred. We couldn’t find a way to fix this, so we removed the fixed effect from mobile devices.

          • Anton

            Ah! Thanx Sebastiano. Understand.

            Any idea or tipp or link how to solve this via browser-detection or so?

          • Anton

            Found some solution via http://wurfl.io/

            Now on mobile-devices no background is fixed AND on all desktop devices the backgrounds are always fixed (not depending on browser-width).

            Instructions:

            Simply remove the mediaquery-part from CSS-File (“@media only screen and (min-width: 1170px)” and so on).

            Than include the wurfl-line (” “) in the HTML/PHP-File.

            And than add your own Javascript-Code like this:
            var css = document.createElement(“style”);
            css.type = “text/css”;
            if(WURFL.is_mobile){
            css.innerHTML = “.cd-fixed-bg-fixit { }”;
            } else {
            css.innerHTML = “.cd-fixed-bg-fixit { background-attachment: fixed; }”;
            }
            document.body.appendChild(css);

            Finally add the cd-fixed-bg-fixit-Class to every Background-Image like this:

            Thats all :-)

            PS: dont mention the enhanced Javascript-Code – its just for readability. Surely you can minimize it – thats clear.

            Best
            Anton

        • http://paskainos.com/ Paskainos

          @Anton:disqus, ‘background-attachment: fixed’ doesn’t work in mobile like it does in desktop (see Paul Irish’ comment: https://twitter.com/paul_irish/status/306818591196602368) because, largely for performance reasons, viewport ‘scrolling’ in mobile is handled differently.

          There are obviously a number of workarounds, including a few mentioned here: http://css-tricks.com/perfect-full-page-background-image/. For strictly fixed position background elements, personally I prefer the method we employed here: http://libertycrude.com/. You’ll notice the ‘watermark’ image (background) is contained to the viewport, and doesn’t scroll – even on mobile devices.

          If you’re after a more versatile solution, my personal favorite is the method employed by the skrollr library: http://prinzhorn.github.io/skrollr/. Not to mention, Prinzhorn offers a better explanation of the ‘mobile scrolling’ issue: https://github.com/Prinzhorn/skrollr#the-problem-with-mobile-and-the-solution. We used skrollr on this site: http://mojo-lab.com/ and you’ll notice that the parallax scrolling effect works across all devices, including mobile, which is customarily difficult to accomplish.

          • Anton

            Ah! Great – thanx, Paskainos!

            I’m gonna check this out and try to embed something. Because the effect is so cool in my opinion that I want it also on mobile devices.

          • http://paskainos.com/ Paskainos

            You’re welcome, and best of luck! If you’re planning on using the skrollr library, you’ll probably want to check out this demo at some point.

  • Manish Pathak

    Awesome.. Very Helpful. Thank u so much.. <3 :)

  • http://kikemonk.com/ Kike Taniguchi

    It looks great, but how about the cross browser compatibility?

    • Sebastiano Guerriero

      Hey Kike, you can see the table about the cross browser compatibility right below the title of the resource (supported on all major browsers)

    • Mónica Rau R.

      there you have…

  • http://lilly.io LillyDevShop

    Awesome resource! I also particularly enjoy your syntax highlighting colors. :)

  • coljung

    Great mini tutorial.

    I tried something fairly similar, it looked a bit like this:

    … content goes here

    Basically my has the background set to fixed and hundred%. And inside the ’empty-divs’ have a set height and transparent background, so that the bg of main shows up. Unfortunately the site is still under dev so i have no links for preview.

    The problem i have is that on Chrome, sometimes on the history when i go back one page or i submit a form, on reload, the background randomly disappears. I’ve had this bug opened for over 3 months, and so far have been unable to find a solution…

  • http://cesimarxavier.com.br Cesimar Xavier

    Sebastian, parabéns pelo artigo. Muito bom.

  • Milan

    I tried to do this few times, but there was a problem with webkit browsers, images was gone…I read that is because of conflicts of the CSS properties like “backface-visibility: hidden;”… So, if you use this, check out if is it work properly in webkit browsers.

  • Katie Langerman

    Thanks for this template! I’ve been messing with it for awhile, trying to make the top links link to each colored div for an infinite scroll site. I have ran into a few issues with that- one being that when I initially load the page, it doesn’t start at the top!

    Also, I want to add in a table of images that link to outside pages. However, when I try this the last link in the table continues throughout the rest of the page. Actually, any link I put in any of the colored div does the same thing- it remains contained in the div it should be in (you can only click on the link itself) but when you get to the next fixed image, the entire page is a link.. Why is this happening?!

    Thanks!

    • http://codyhouse.co Claudia Romano

      Hi Katie, do you have a live link?

      • Katie Langerman

        Hello! After posting this I made some quick fixes but didn’t actually solve anything.

        This is the site I’m working on: http://www.kitcheninc.net

        The page now loads at the top because I took out the form I had in there- instead I replaced it with an ’email us’ link. This is fine for now because I don’t actually know how to properly put a form in that would email somewhere (I’m just starting out.)

        For the table of images- I changed it so the text below each image is a link, and that solved the problem. However, I do wish I could click the images as a link- but when I had it set up that way, the link carried throughout the rest of the page.. like it wasn’t contained somehow!

        Please excuse the messyness of my site- I’m planning to make some fixes but I’m also trying to learn some basic programming!

        • http://codyhouse.co Claudia Romano

          Hi Katie, you should try adding an overflow: hidden to .cd-fixed-bg element.

          • Chenna

            Hi Claudia, any one line code is there for nice scroll in Html Div..

  • Susie Starkman

    This is awesome! Exactly what I was looking to accomplish. Thanks for sharing.

  • shakil_spi

    no comments

  • Corey

    Anyone else notice an ie9 bug where you can scroll horizontal regardless of the 100% width? Haven’t been able to fix the bug. It seems like it is from a background image from within a class..

    • http://codyhouse.co/ Sebastiano Guerriero

      You can try adding an overflow-x: hidden; to the body element. Since this may affect the mobile experience (buggy scrolling), you can target old browsers using Modernizr by doing this:

  • hercules

    I’m from Brazil, and I really liked your explanation, very well explained. Was looking for something similar, and only found on your site. Very Nice !!

  • w4ffl3s

    For some reason I’m getting a white border around my background pictures and color bacgrounds. Not sure why… Great tutorial by the way this is an awesome website.

    • w4ffl3s

      I was able to fix this with “body, html, main { margin: 0; }” in my css. This fixed the right and left margins but didn’t do anything to the top and bottom. I had to add “overflow:hidden;” to each cd-color selector to get the top and bottom of the backgrounds and colors to lign up seamlessly. Does this sound like a good enough solution? I’m wondering if there is a better way to do this.

      • https://safesigned.com M J

        Hi, it’s smart to use:
        *{
        margin: 0px;
        padding: 0px;
        }

        in every css it’s helps with all unknown margins and paddings.

        Very useful tutorial. Thank you (to the article author :) )

  • Ashling Barker

    Hi, thanks for this! I was wondering what the code would be if I wanted to create a static background with a png image that moved down the page when a user scrolled?

    • http://codyhouse.co/ Sebastiano Guerriero

      you can try by removing the background-attachment: fixed; property from the .cd-fixed-bg elements if you want the images to scroll

  • Tariq kilani

    Does this support mobile because my website is responsive and when i viewed it from an ipad the photo was messed up

    • http://codyhouse.co Claudia Romano

      Hi Tariq, yes it is responsive. The background-attachment: fixed doesn’t work on mobile so you’ll see scrolling images, but there shouldn’t be any issue

      • Tariq kilani

        I Know but what it does is zoom in the picture a lot ill give a photo
        The link is crappyland.com/Hawasheen/index.html

        • http://codyhouse.co Claudia Romano

          oh I see the bug in your version. Did you have the same problem with our demo (checked it on my iPad and seems to work fine)? Anyway the max-height/max-width you assigned (px values) may be messing up with the images. Hope this helps!

          • Tariq kilani

            If i doesnt put a pixle value for the height it disappears

          • http://codyhouse.co Claudia Romano

            you can use height: 100% (like we did in our nugget) or 100vh.

  • Tariq kilani

    How can i make it look the one in this website
    http://cubify.com/home/b?utm_expid=54557154-13.ppCp2VXBQ5-upfgvUim7Aw.1

    • Josiah MacDonald

      jquery

  • Peter Steintjes

    Thanx for this great looking one pager. I am now trying to add some changes I would like to add an slider. The site is displayed at http://psteintj.home.xs4all.nl/ and the problem is that when it’s displayed in Safari or Firefox, everything is looking fine, but when it is displayed in Chrome the images that are displayed on the pages 2, 4, 6, 8 are over rulled by the images of the image slider. When I am using galleria instead of Supersized there is no problem. I have been choosing Supersized because I could manage to get the slider including the slider navigation to fit exactly in to the screen. I have to admit that I am a starter with all this and I thought it would be solved by changing the z-index, but that didn’t help.

    Do you have any idea what I have done wrong?

    Thanx in advance.

  • Peter Steintjes

    I just noticed that when watched the site on a Mac stand alone computer in Chrome there isn’t a problem. Just when I watch it on a Macbook pro in chrome the problem apears. What could cause this problem?

  • Calliframe

    Hi, I’m new to code and know how to do some things, but here, if I wanted to do that on a wordpress site, where should I put the html code?? It’s all php so I’m a bit lost in here. Can someone tells me? Thanks!

    • Chenna

      How to Achieve nice Scroll for html div?..

  • Nestor Vanz

    it’s not working for chrome in mobile version…any solution?

    • http://codyhouse.co/ Sebastiano Guerriero

      Hi Nestor, on small devices it’s just a list of blocks, the fixed background effect is not visible on purpose: iOS doesn’t like background-attachment: fixed; and background-size: cover; applied at the same time

      • mouldwarp

        Hi Sebastiano, I dont’ think background-attachment: fixed works on iOS at all, background-size or no background-size. Ideas? Thanks!

      • Kelderic

        Background-attachment:fixed is just broken on Chrome-Android, unfortunately.

  • paralellos

    I’ve noticed it works fine on all five main browsers untill you add js, like a sliders or something like scrollme. At that time there seems to be some pretty serious rendering issues in chrome and opera with minor fragenting of bg in firfox(developer). Safari seems fine and I don’t know about IE but I imagine there’s a problem there too.

  • Mike

    How do you make sure your containers are always the perfect fit for the window size?

  • Jennae Petersen

    Question: I’d like to use my nav menu to link to the various DIVs on the page. I am usually able to do this with a simple div ID, then linking to it (ex. #portfolio ). However, those links aren’t working to scroll the page. Is there another way to accomplish this? The site is here: http://sandbox2.hibiscuscreative.com/kids/

    If you hover over “Kids” in the nav, I’m trying to link the first couple links to the scrolling content sections on the page. Thanks in advance!

    • http://codyhouse.co Claudia Romano

      Hi Jennae, yes you can link to a simple div (using e.g. #portfolio) but don’t forget to add id=”portfolio” to the div you want to scroll to!

  • Roland Saldana

    Question: My page is not viewable on IE 10 and PC Firefox. All other browsers on Mac and PC Chrome do work. Any suggestions?

    Here is the site: http://pages.exacttarget.com/page.aspx?QS=773ed3059447707db8a316b4107cc2050917c25dc2fc36043ded43de42dbf97b#0

  • Roland Saldana

    Does anyone have any ideas on browser compatibility with IE 10 and Firefox (pc)? I’ve seen the comments below, but cannot see any solutions?

  • Marija Stupar

    I wouldn’t recommend using “background-size: cover” and “background-attachment: fixed” together, since the cover property relates to the window dimensions, not the image container. More info here: http://www.carsonshold.com/2013/02/css-background-sizecover-doesnt-like-fixed-positioning/

    • Roland Saldana

      Marijar – I am new to css, so at this time, IE has my title text moved over to the right and there is extra white space there as well. Which code do I remove to fix this?

      Firefox (pc) is missing all of my images.

  • Outline

    Hello,

    Is it possible to use a sticky footer with that type of layout? I am trying to include a footer with something similar to the code on this site http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
    but the footer does not go down if I set container height to 100%… Any idea of how I could make it?

    • http://codyhouse.co Claudia Romano

      Hi, do you have a live demo?

      • Outline

        Hi Claudia, thanks for your reply! You can see my demo here : https://jsfiddle.net/f2jqnvtL/1/

        • http://codyhouse.co Claudia Romano

          You can try removing min-height: 100% and height:100% from the #container element and give a height: 100vh to .fixed-bg and .scrolling-bg.
          Hope this helps!

    • David

      I would like to achieve this using a sticker footer as well. Is this possible? I am using the same method as Outline is using.

  • Wil

    Hi folks,

    First off, thanks for the great tutorial and demo. This may be too far off topic, but I would love to know how to close the mobile menu once a link has been clicked. Currently the menu stays open blocking a portion of the screen. I have a demo up at captainronsfishing.com. I realize I have an issue with the logo not leaving enough room for the mobile nav button and it is pushing it down below – I would just like for the dropdown to not display once the link is clicked.

    Thanks again.

    • http://codyhouse.co Claudia Romano

      Hi Wil,
      try adding in the .js file:

      Hope this helps!

      • Wil

        Claudia,

        Just wanted to write back to say thank you – this did exactly what I had wanted. You folks are very kind.

    • Alan Houser

      @disqus_iqJ8lJofNV:disqus just consider the usability! If you hide access to the menu, you’re making the site difficult to use. Think about the visitor who already doesn’t know what the ‘hamburger menu’ is— then imagine them not finding a menu at all.

  • Jordan Poland

    Does anyone know how to add a footer to this? Mines isn’t showing up

    • paolo

      yes, you can do something like this

      this section is fixed background
      this section is scroll background
      this section is fixed background
      this section is scroll background

  • Brian Bambl

    Awesome! Very simple to implement. I tried another parallax example, but couldn’t get it to work. Your DEMO actually does have a different structure though.

  • Abstract Union Print

    We tried using this method here: http://www.abstractunionprint.com within the header image. However, we’re getting weird glitch lines across the page like the ones seen in the attached image. Does anyone know what’s happening?

    • Rob Campbell

      I see this too.

  • Emily Vester

    Is there a way to switch the code so it is transparent at the top, and when you scroll it switches to have the black background? Right now, the code is making it so my nav bar is solid black, and when I scroll, it turns transparent. I want the opposite effect! My website is emilyavester.com and i want the effect on my home page!

  • Jordan Poland

    Does anyone know how i can add a footer to this? It doesn’t seem to be working for me. Thanks

    • http://codyhouse.co Claudia Romano

      Hi Jordan, have you put your footer inside the element?

      • Jordan Poland

        Hi, yeah I have but its making no difference. The footer is appearing at the top of the page on top of my header!

        • http://codyhouse.co Claudia Romano

          Do you have a live version?

  • hans

    Doesnt work on chrome android

    • http://codyhouse.co Claudia Romano

      Hi Hans, give a look at what we replied to Nestor Vanz (comment below).

  • ABY MATHEW

    How can I make the background also scroll a small amount?

  • http://www.checkoutrizzo.com ToddWebDev

    This is a great submission. Thank you.

    CSS transforms and transitions seem to make the background flicker on chrome. Any one have suggestions on how to avoid this?

  • Jason

    Is the fixed background not working for anyone else on the latest version of Chrome for OS X (43.0.2357.81)? All images are scrolling for me in Chrome, but it works fine in Safari.

  • David Middelveld

    I tried this, but my div stays at 0px height so I cant see the bg image

    • http://codyhouse.co Claudia Romano

      Hi David, make sure to set a height:100% to the body and html. Hope this helps!

      • David Middelveld

        Already did this.. Also tried ::after. I have this
        body, html, .main-vast {
        height:100% !important;
        }
        .main-vast {
        min-height: 100%;
        background-size: cover;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-position: center center;
        z-index:1;
        }
        .first {
        background-image: url(images/dallinga%20010.JPG);
        }

        .main-content {
        height: 100%;
        position: relative;
        z-index: 1;
        }

        • Gerard Diepeveen

          Instead of height:100% you could use also, or maybe better height:100vh were vb stands for viewport height. 100% height and vertical centering do not work together, 100vh does is my experience. There is also 100vw (viewport width)

  • Lebogang Gaolaolwe Semousu

    May i add 3 columns in any of this containers?

  • Mathilde MH

    Hello, does it works on WordPress or with Boostrap? Thanks

  • Steven Hoodlebrink

    I just want to make sure I am understand this correctly. This effect only works if the screen size is larger than 1170 px and then the background attachment turns into fixed, correct?

    • http://codyhouse.co Claudia Romano

      Yes!

  • Ed Quijano

    Does anybody know if this code can be implemented in bootstrap?

    • paolo

      yes it can be implemented on bootstrap, here’s the site i’m working on: http://nest.gov.ph/ navigate to the bottom, or click the about on the main navigation. the only drawback is how to make them work on tablet and mobile, because they scroll on those devices. still searching for css or scripts to make them work.

      • Ed Quijano

        Ok. I will look how to improve it in mobiles and I will posted here too

        • paolo

          I finally found a way to make it work on tablet and mobile without scripts by creating a fixed position div with z-index lower than the parent.

          HTML:

          content here….

          content here….

          CSS:

          .fixedbg{
          position:fixed !important;
          content ” “;
          top:0;
          right:0;
          bottom:0;
          left:0;
          min-width:100%;
          min-height:100%;
          width:inherit;
          z-index:-100;
          margin:0;
          padding:0;
          -webkit-backface-visibility:hidden; /*Most Important*/
          backface-visibility:hidden;
          }

          .parallaxbg{
          background-size:cover !important;
          background-repeat:no-repeat !important;
          background-position: center center;
          background-attachment:scroll;
          }

          Hope it helps :)

  • William Durbin

    Will this work in Joomla running Gantry?

  • Christian De Longhi

    please help me!! why in this link: http://www.italyinadinner.com/storia/
    background-attachement: fixed; don’t work in google chrome?…thanks

    • Gerard Diepeveen

      Seems fixed backgrounds in divs do not work with mobile devices. Yes course JQuery can be used, but you might consider not to because of time consuming calculations JS has to do, which could ruin the user experience.

      For the time being (hoping the silly fixed background issue will be solved by browser manufacturers) you better use scrolling backgrounds by using media queries (with media queries you tell browsers to use different settings in css for mobile screens) that will still look so much better than quirky working bg on mobile devices and use the real stuff for larger screens. I did so on my site (www.design65grafischontwerp.nl) and still looks great, of course on pc the experience is much greater.

      • Christian De Longhi

        Thanks so much for your support :)

  • https://www.facebook.com/drikting Andrew Ting

    Thank you Sebastiano for this good tutorial! Though for my case, I had to include the line-height: 0px to remove the white gap between the fixed and scrolling background images :- like this Hope this helps :-)

  • sanz31

    oh thank you so much… i really want to learn this

  • Quique

    I have used the next media query to limit the scroll on tablets and mobiles. On desktops and laptops the image is always fixed, even with a browser viewport 420px width.

    @media screen and (max-device-width: 1024px) {
    .box { background-attachment: scroll; }
    }

  • Robert Anderson

    Hi, I have used this script on my site and wish to add a cookie consent noification code. I am using silktides code to present notification on the site, but it does not display. This is the code required in the .

    window.cookieconsent_options = {“message”:”This website uses cookies to ensure you get the best experience on our website”,”dismiss”:”Got it!”,”learnMore”:”More info”,”link”:null,”theme”:”dark-floating”};

    Please help, Cannot figure this out..

    Rob

  • Sylwester Kłysz

    Great solution Sebastiano! For today I think it’s only possible through jQuery.