Forum Moderators: not2easy
I'm doing a website that has a background image shown in this photo here (hosted on flickr): <snip>
I'm wondering of the best way to anchor the background image to the page.
I could simply just save the background image as a .jpg and anchor it to the body tag via css, but that would be a large background file, so that's not my preferred method. (50kb or so)
I wish there was a way to do it so that I could have something just take care of the glow effect that takes place on either side of the page, with the rest just being covered by a repeating brown background on the body.
Am I making sense? Anyone have any ideas? (preferrably best practices?)
Thanks!
[edited by: swa66 at 8:44 am (utc) on July 7, 2009]
[edit reason] No personal links allowed please see ToS and forum charter [/edit]
If so, and the glow can be tiled vertically then make a slice of both left and right globs as large as the tile needs to be but as small as possible to achieve best optimisation, then if your background is say a simple colour or grid then make the smallest possible slice of that which is still tilable then use the following css:
body {
margin: 0px;
padding: 0px;
background-image:url('./images/backgroundTile.gif');
background-position: top left;
background-repeat: repeat;
}
#border_a {
display: block;
width: 700px;
margin: 0px;
padding: 0px;
margin-left: auto;
margin-right: auto;
background-image:url('./images/leftTile.gif');
background-position: top left;
background-repeat: repeat-y;
}
#border_b {
display: block;
margin: 0px;
padding: 0px;
padding-left: 10px;
padding-right: 10px;
width: 680px;
background-image:url('./images/rightTile.gif');
background-position: top right;
background-repeat: repeat-y;
}
<body>
<div id="border_a">
<div id="border_b">
10 pixel padding left and right i.e. if your vertical tiles are 10px wide.
</div>
</div>
</body>
If theres a mistake in the code then oops but should be able to do what you after if ive understood right.
[edited by: PSWorx at 1:56 pm (utc) on July 8, 2009]
