Runboard.com
You're welcome.

runboard.com       Sign up (learn about it) ● Sign in (lost password?)

 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

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


Registered: 07-2005
Location: Texas
Posts: 490
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 {
    width:100%;
    height:100%;
}

#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>
<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; }
 </style>
 <![endif]-->

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


---

RSFRDAdvertise Boards On TRDREITB
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)