1

So I have an image (w:1638px h:2048px) and I set it as my background using the background-image function and then trying to give it width: 100%; and height: 100%; attributes. It stretches the image across the screen horizontally but then it makes me scroll down for the rest of it. I want no scrolling. Is there a way to crop/position a portrait orientated image to look proportional and fill the screen as a background properly? Should I make it a different size in Photoshop, something landscape orientated?

I have a regular <div class="bgimage></div> in the html and the css looks like this:

.bgimage {
height: 100%;
width: 100%;
background-image: url(images/background.jpg);
background-repeat: no-repeat;
background-size: cover;
position: absolute;

}

Is there something I'm missing or not doing correctly? I'm using Dreamweaver CS6 and viewing it in the latest versions of Firefox/Safari.

Thank you.

Tetsujin no Oni
  • 7,300
  • 2
  • 29
  • 46
ThePhard
  • 23
  • 3
  • 8

1 Answers1

2

If you're setting the background for the whole page, just style the body element instead:

body {
    background-image: url(images/background.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

http://jsbin.com/rugom/2

Dryden Long
  • 10,072
  • 2
  • 35
  • 47