Small issue, need help asap!

[Anonymous]

Hey again!

I've got a small issue with my background, I've set the body h/w to 100% and the background image to h/w 100%, but if the screen resolution is too small some parts become white. I've printed my screeen of my 2 monitors(one with high and another one with low resolution)

IMAGE \/
http://i41.tinypic.com/2450lqq.jpg
IMAGE /\

CSS:

body {
line-height: 1;
background-attachment:fixed;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #333;
font-size: 14px;
line-height: 18px;
background: url('images/dark.jpg');
background-repeat:no-repeat;
background-size:100% 100%;
}

The left monitor is perfectly fine, the right is the wrong one, as I need to scroll to get to the right. The part that doesnt fit the screen is white.

How do I fix this?

Regards,
Soder.

 

[Anonymous]

If you are trying to stretch the background image to cover the whole screen I use this:

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

for the HTML and the css is:

#background {
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: -1;
}

.stretch {
    width:100%;
    height:100%;
}

The z-index is the key. This comes from http://stackoverflow.com/questions/1150163/stretch-and-scale-a-css-image-background-with-css-only which I have bookmarked.

Hope this helps.

 

[Anonymous]

Thanks for your reply!

The issue is still the same, when I zoom in or use low resolution the part which i need to scroll to see is white

EDIT: Fixed, thanks alot!

Regards,
Soder.

 

[Anonymous]

Hello!

Try setting the width and the height of the body to auto.

#body
{
width: auto;
height: auto;
}