Grow your CSS skills. Land your dream job.

[SOLVED ] How scrolling a full page background?

  • # September 19, 2013 at 4:23 am

    Hello I have read the post Perfect Full Page Background Image and I like to create a full background that scrolls with the text like http://www.august.com.au

    At the moment I am using technique #1 I tried to set the position: absolute; but then it’s scrolls on larges screen where there is no content and overflow: hidden; doesn’t solves it.

    Anyone a idea?

    img.bg {
      /* Set rules to fill background */
      min-height:100%;
      min-width:1024px;
       /* Set up proportionate scaling */
      width:100%;
      height:auto;
       /* Set up positioning */
      position: absolute;
      overflow: hidden;
      top:0;
      left:0;
    }
    @media screen and (max-width:1024px) {
      /* Specific to this particular image */
      img.bg {
        left:50%;
        margin-left: -512px;
        /* 50% */
      }
    }
    
    # September 19, 2013 at 4:45 am

    We’d need to see what you have so far.

    As for the http://www.august.com.au image, that image is HUGE and cheats because it’s not a full page image.

    It’s actually positioned at the top of the page and then the bottom of the image color matches the background of the site.

    Oh…and it’s done by JS.

    # September 21, 2013 at 6:55 am

    I have tried to set the img.bg to position: absolute; http://jsfiddle.net/piggybattery/9QzmS/2/ but then it gives a horizontal scrollbar.

    It does matter if the image matches the background color of the body.
    I rather have a fit for the common resolutions 1366×768 and 1920×1080 then a strange distorted.
    By example if I view a background image form 1024x 683 at a viewport 1280×868 it displays a nice proportion
    But with a viewport of 1920×858

    # September 21, 2013 at 8:46 am

    What I meant was put image as a bg of the body….but you have to start with a REALLY big image.

    http://codepen.io/Paulie-D/pen/ksrau

    # September 28, 2013 at 9:36 am

    Thank you, that was what I were looking for

    # September 28, 2013 at 10:31 am

    Just in case you’re interested, here’s an alternative way to achieve similar result by actually using the IMG tag:

    http://codepen.io/tomasz86/pen/EpGLq

    It may be useful when better cross-browser compatibility is required since this one works even in IE6.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".