Jump to content

Problems with BG not resizing to full screen


Wulfe

Recommended Posts

I am trying to make my background in a wordpress site auto size to full screen. I am having no luck at all doing so.

 

Here is the original code, i did take out the Top BG because i only want one image to auto size to the full web browser with out repeats.

 

/* CSS Tweaks */

* {padding:0;margin:0;}

a img {border:0;}

.clear {clear:both;}

a {text-decoration:none;}

a:hover {text-decoration:underline;}

p {padding-bottom:10px;}

.hidden {display:none;}

 

/* Body */

body {background:url(img/bg.gif) 4px 5px;font-family:Arial;font-size:12px;}

 

/* Top BG */

.topbg {position:absolute;top:0;left:0;width:100%;height:260px;background:url(img/top_bg.gif) repeat-x top;z-index:1;}

 

/* Wrapper */

.wrapper {position:relative;width:960px;margin:auto;z-index:2;}

You need to define width:100% on your body (assuming this contains your bg image?). Do not forget to also call width:100% on html as % only works if your parent has a width declared.

 

If that doesn't work, try removing the  * {padding:0;margin:0;} under tweaks.

I tried doing this and many other techniques and they all failed. The image keeps repeating. When i put no-repeat it in the image still does not auto adjust

 

/* CSS Tweaks */

*

a img {border:0;}

.clear {clear:both;}

a {text-decoration:none;}

a:hover {text-decoration:underline;}

p {padding-bottom:10px;}

.hidden {display:none;}

 

/* Body */

body {width:100%;height:100%;background:url(img/bg2.gif);}

 

 

 

/* Wrapper */

.wrapper {position:relative;width:960px;margin:auto;z-index:2;}

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.