Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [SOLVED ] How scrolling a full page background?

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #150570
    peterbr
    Participant

    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% */
      }
    }
    
    #150571
    Paulie_D
    Moderator

    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.

    #150849
    peterbr
    Participant

    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

    #150856
    Paulie_D
    Moderator

    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

    #151586
    peterbr
    Participant

    Thank you, that was what I were looking for

    #151587
    tomasz86
    Participant

    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)
  • The forum ‘CSS’ is closed to new topics and replies.