Small issue, need help asap!

Discussing Html . Code , Software , other

Moderators: egami, macek, gesf

Post Reply
soder
New php-forum User
New php-forum User
Posts: 15
Joined: Fri Mar 16, 2012 7:38 pm

Mon Apr 23, 2012 9:43 am

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:

Code: Select all

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.

garr1095
New php-forum User
New php-forum User
Posts: 7
Joined: Wed Apr 18, 2012 3:21 pm

Mon Apr 23, 2012 12:05 pm

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

Code: Select all

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>
for the HTML and the css is:

Code: Select all

#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/1150 ... h-css-only which I have bookmarked.

Hope this helps.

soder
New php-forum User
New php-forum User
Posts: 15
Joined: Fri Mar 16, 2012 7:38 pm

Mon Apr 23, 2012 1:49 pm

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.

User avatar
WebOutGateway
New php-forum User
New php-forum User
Posts: 65
Joined: Mon Jun 13, 2011 9:25 pm
Location: Pasig City, Philippines
Contact:

Tue Jun 03, 2014 6:20 pm

Hello!

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

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

Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests