This topic is locked

Custom Background Image

10/23/2012 8:40:05 AM
PHPRunner Tips and Tricks
S
sradforth author

I spent a while trying different techniquest to get a background image in PHPRunner. I'm fairly new to PHP/HTML so this may be basic stuff but equally I'd have like to have seen this tip in the forum so adding it should it help anyone else.
The way I did it was to select 'Editor' page in PHPRunner 6.2. Next selected the 'Header' section and added the following



<link REL="stylesheet" href="customcss/bodycss.css" type="text/css">
<?php

$imageBackgroundUrl= "images/mybackground.jpg";
echo "<div id=\"bg\"><img src=\"".$imageBackgroundUrl."\" width=\"100%\" height=\"100%\" alt=\"\"></div>";
// This is the start of the content block. It is ended in the Footer component

echo "<div id=\"content\">";

?>


Notice the open <div> content. You need to close that in footer. So select 'Footer' and add



</div>


Next locate your ???.phpr file in windows explorer and upload your 'mybackground.jpg' image to this PHP directory in ./source/images (I had to create the images directory).
Also you'll need a custom css file added to ./source/customcss

create a file called bodycss.css and add the following into it.

html

{

height:100%;

}

body

{

height:100%; margin:0; padding:0;

}

#bg {position:fixed; z-index:-1; top:0; left:0; width:100%; height:100%;}

#content {position:relative; z-index:0; margin-left:auto; margin-right:auto;text-align:center;}


That should be it and you now have a background image that will stretch across the entire screen and remain static as you scroll around.
This is courtesy of other posts by Sergey and others and reference to this website showing how to stretch an image http://www.htmlite.com/faq022.php