Image is not displaying in full on a body background

Question

Example: http://jsbin.com/opokev/20

Full image: http://i53.tinypic.com/347a8uu.jpg

As you can see, I have a body with an offset for the header and the body has an image background. However, the image is not being show in full.

Question: Can I do something with CSS so that the whole image is shown or do I need to use Gimp or photoshop to scale down my image. Currently it is 1400 x 1050 pixels.

Answer 1

I think you are trying to make the image fit the window even if that means the image is distorted.

You can achieve this with background-size property you have already used. But instead of cover you set it to 100% 100%. Live example: http://jsbin.com/opokev/21/

body {
    background: url(http://i53.tinypic.com/347a8uu.jpg) no-repeat center fixed;
    background-position: 0px 85px;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
}