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

Pastor Rick Profile
Live feed
Miscellaneous info

Head Administrator

Registered: 07-2005
Location: Texas
Posts: 501
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="http://www.image hosting site/backround.jpg" 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)