[SOLVED ] How scrolling a full page background?

[peterbr]

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% */
  }
}

[Paulie_D]

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.

[peterbr]

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

[Paulie_D]

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

[peterbr]

Thank you, that was what I were looking for

[tomasz86]

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.

[Author]

Posts