Autofit of webpage or resolution in any computer

HTML & CSS
1

Good day!
I research on internet about auto fit of website or adapting the resolution of the monitor or screen of computer, but I can’t find the solution. I want is in any settings/resolution/size of monitor my website appearance was not change. Because now I got a problem that I can’t upload my website in a server because I notice that in other computer my website display was change or change the location of the content of my website, After I noticed that the background was doubled I put the background no repeat and after that on the below of webpage I see a white color.

Here is my css codes:


<style type="text/css">
html,body{
overflow:hidden;
}
BODY {
background-image: url(layout_image/bgroundv09.png);
background-attachment: fixed;
}
-->
</style>

<style type="text/css">

#ddcolortabs{
margin-left: 2px;
padding: 0;
width: 100%;
background: transparent;
voice-family: "\\"}\\"";
voice-family: inherit;
padding-left: 2px;
}

#ddcolortabs ul{
font: bold 12px Arial, Verdana, sans-serif;
margin:0;
padding:0;
list-style:none;
}

#ddcolortabs li{
display:inline;
margin:0 2px 0 0;
padding:0;
text-transform:uppercase;
}

#ddcolortabs a{
float:right;
color: white;
background: #8cb85c url(layout_image/color_tabs_left.gif) no-repeat left top;
margin:115px 2px 0 0;
padding:0 0 1px 3px;
text-decoration:none;
letter-spacing: 1px;
}

#ddcolortabs a span{
float:right;
display:block;
/*background: transparent url(layout_image/color_tabs_right.gif) no-repeat right top;*/
padding:6px 9px 2px 6px;
}

#ddcolortabs a span{
float:none;
}

#ddcolortabs a:hover{
background-color: #678b3f;
}

#ddcolortabs a:hover span{
background-color: #678b3f ;
}

#ddcolortabs #current a, #ddcolortabs #current span{ /*currently selected tab*/
background-color: #678b3f;
}
</style>
<style type="text/css">

#Layer1_background_green {
	position:absolute;
	width:980px;
	height:392px;
	z-index:1;
	top: 149px;
	left: 0px;
}
#Layer1_vertical_line {
	position:absolute;
	width:3px;
	height:387px;
	z-index:2;
	left: 170px;
	top: 153px;
}
#Layer4_horizontal_line {
	position:absolute;
	width:980px;
	height:5px;
	z-index:3;
	left: 0px;
	top: 150px;
}
#visionmission_flash {
	position:absolute;
	width:644px;
	height:404px;
	z-index:5;
	left: 270px;
	top: 156px;
}
#green_frame {
	position:absolute;
	width:172px;
	height:385px;
	z-index:6;
	left: 0px;
	top: 156px;
}
#nav_vertical {
	position:absolute;
	width:165px;
	height:111px;
	z-index:7;
	left: 10px;
	top: 363px;
}

#nav_vertical ul{
font: bold 12px Arial, Verdana, sans-serif;
margin:0;
padding:0;
list-style:none;
}

#nav_vertical li{
display:inline;
margin:0 0 0 0;
padding:0;
text-transform:uppercase;
}


#nav_vertical a{
float:left;
color: green;
/*background: #8cb85c url(layout_image/color_tabs_left.gif) no-repeat left top;*/
margin:0 2px 0 0;
padding:0 0 1px 3px;
text-decoration:none;
letter-spacing: 1px;
}

#nav_vertical a span{
float:left;
display:block;
/*background: transparent url(layout_image/color_tabs_right.gif) no-repeat right top;*/
padding:9px 9px 2px 6px;
}


#nav_vertical a:hover{
color:#00CC00;
}

#nav_vertical a:hover span{
color: #00CC00 ;
}

#nav_vertical #current a, #nav_vertical #current span{ /*currently selected tab*/
/*background-color: #678b3f; */
color:#FFFFFF
}
#ds {
	position:absolute;
	width:73px;
	height:72px;
	z-index:8;
	left: 0px;
	top: 160px;
}
</style>

Thank you….

2

There are only 2 ways to fix your scaling issue:

  1. Use the CSS3 background-size property, but this do not work on IE versions less than 9
  2. Place your background as an IMG tag instead, with a height and width of 100%
3

Can you give me a sample codes for that?
thank you…actually not only my backgorund position is my problem

4

With CSS3 you would simply use: background-size: 100% 100%; (It’s support is limited).

With the IMG tag, you add the background picture as a regular image, wrap the rest of the content inside a DIV and then set…

height: 100%; width: 100%; position: absolute; top: 0; left: 0;

… onto the image in CSS. You then add z-index (a high value) to the wrapper DIV. The IMG will therefore float and span under the content. :slight_smile:

The code in action: http://www.ringvemedia.com/

5

Actually in a computer that I’m using the background is like on the website that you given, but when i put it on the testing server where the monitor is to old theres an white color below the background.

6

Oh sorry, you might need to set height: 100% in the body tag.

If that doesn’t work, you could also add bottom: 0; to the IMG (and that might also fix it). :slight_smile:

7

I try the code you suggested and I put it on the:


<style type="text/css">
body, html {
overflow:hidden;
background-image: url(bground.png);
background-attachment: fixed;
background-repeat: no-repeat;
height: 100%;
bottom: 0;
</style>

but nothing change:(

8

That’s because you used a background image… you would need to use a regular HTML IMG element (and apply the effect to that) as TommiChi stated.

You cannot stretch a background image to span the full page size until CSS3 is fully supported (and it’s not). :slight_smile:

PS: If you look at the website I linked too, it uses an IMG element to achieve the effect too (the code below).

	</div>	<div id="bg"><div><table cellpadding="0" cellspacing="0"><tr><td>[B]<img alt="" src="server//bg.jpg" />[/B]</td></tr></table></div></div>
9

You mean I put my background on table?

10

No… you don’t use a background image… look carefully at that code, there is an IMG element in there… I put it in bold for you. :slight_smile:

11

Why shoud i used table?can I used div?
My problem is it has an excess white background on the bottom of my webpage

12

I never said you should use a table, if you looked at the example I’ve explicitly stated twice now that all you need is the IMG element!