For the fixed background image, you can use CSS. Put the following between the <head> and </head> tags on your page:
<style type="text/css">
body {
background-image: url(yourfilenamehere.jpg);
background-attachment: fixed;
}
</style>
Alternatively, you could add that as an attribute in the HTML itself, like this:
<body style="background-image: url(yourfilenamehere.jpg); background-attachment: fixed;">
For the image that does move, use the <img> tag between the <body></body> tags:
<img src="yourimagethatmoves.jpg" />
A few notes on this. First, your images do not have to be JPGs - they can be any image file type - JPGs, GIFs, PNGs, etc. Second, the / before the end of the <img> tag (just for your reference) is there because in the new XHTML specifications, tags that do not have a closing tag (like </body> for the <body> tag) have the slash within the opening tag itself. Not necessary, but it's good valid XHTML. Third, using the code provided above, the fixed background image will repeat indefinitely in both directions. To stop this, add in the following on a new line between the <style></style> tags in the first option or at the end of the style attribute in the <body> tag for the second example: "background-repeat: none;" (no quotes though). Replacing "none" with "repeat-x" or "repeat-y" will make it repeat in only one direction - just don't forget the semi-colon at the end of the line! Finally, to get the transparency effect like on the Starcraft page requires work in Photoshop or another image editor, and saving the image as a GIF or PNG that allows for transparency. That cannot be done inside the HTML script, although there might be some ways of doing this with JavaScript.
06-10-2007, 04:22 PM
Linear Mode
