Pastor Rick
Head Administrator
Registered: 07-2005
Location: Texas
Posts: 501
Karma: 12 (+12/-0)
|
|
|
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="http://www.image hosting site/backround.jpg" 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.
Last edited by Pastor Rick, 6/9/2010, 7:54 pm
|
6/9/2010, 8:54 am
|
|