Wulfe Posted May 31, 2010 Share Posted May 31, 2010 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;} Link to comment https://forums.phpfreaks.com/topic/203408-problems-with-bg-not-resizing-to-full-screen/ Share on other sites More sharing options...
Anzeo Posted May 31, 2010 Share Posted May 31, 2010 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. Link to comment https://forums.phpfreaks.com/topic/203408-problems-with-bg-not-resizing-to-full-screen/#findComment-1065592 Share on other sites More sharing options...
Wulfe Posted May 31, 2010 Author Share Posted May 31, 2010 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;} Link to comment https://forums.phpfreaks.com/topic/203408-problems-with-bg-not-resizing-to-full-screen/#findComment-1065595 Share on other sites More sharing options...
Anzeo Posted May 31, 2010 Share Posted May 31, 2010 I found this site, which might do the trick for you, could you confirm? http://css-tricks.com/perfect-full-page-background-image/ Link to comment https://forums.phpfreaks.com/topic/203408-problems-with-bg-not-resizing-to-full-screen/#findComment-1065597 Share on other sites More sharing options...
haku Posted June 1, 2010 Share Posted June 1, 2010 Background images don't stretch or compress, they only show at their normal size. So if you are trying to stretch the image to fit the full screen, it's not going to work. Link to comment https://forums.phpfreaks.com/topic/203408-problems-with-bg-not-resizing-to-full-screen/#findComment-1065945 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.