Welcome to WebmasterWorld Guest from 54.159.246.164

Forum Moderators: not2easy

Message Too Old, No Replies

Best Way to Place Background Image to Page?

   
3:50 am on Jul 7, 2009 (gmt 0)

5+ Year Member



Hello everyone,

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]

1:55 pm on Jul 8, 2009 (gmt 0)

10+ Year Member



Ive no image to see what you are trying to do but im assuming that you have a plain background image with a left/right vertical glow acting as a border?

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]