You're welcome.       Sign up (learn about it) ● Sign in (lost password?)

Pastor Rick Profile
Live feed
Miscellaneous info

Head Administrator
 (Top of the page)
● Premium User ●

Registered: 07-2005
Location: Texas
Posts: 499
Karma: 12 (+12/-0)
Reply Quote
Stretching Background

There have been requests for auto-resizing backgrounds on Runboard such as ]here and ]here. This is my solution to the puzzle. The coding in red is only required if you want the stretched background to to be usable for those poor folks still using IE6 (for whatever reason).

In Your Custom CSS
#background {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: -1;

.stretch {

#content {position:relative; z-index:1;}
At the top of your Custom HTML header
<div id="background">
    <img src="[sign in to see URL] hosting site/[sign in to see URL]" class="stretch" alt="" />
<div id="content"><!-- Start of Board Content -->
  <!--[if IE 6]> <style type="text/css">
 html { overflow-y: hidden; }
 body { overflow-y: auto; }
 #background { position:absolute; z-index:-1; }
 #content { position:static; }

At the end of your Custom HTML footer
</div><!-- end of Board Content -->

That is about as clean as I know how to do this. Comments, suggestions, and/or improvements to this coding project are welcome. emoticon

Last edited by Pastor Rick, 6/9/2010, 7:54 pm


Advertise Boards On TRDConceptsDE
6/9/2010, 8:54 am Link 2 this post Send Email to   Send PM to Blog

Add a Reply

You are not logged in (login)