homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Best Way to Place Background Image to Page?

5+ Year Member

Msg#: 3947390 posted 3:50 am on Jul 7, 2009 (gmt 0)

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?)


[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]



10+ Year Member

Msg#: 3947390 posted 1:55 pm on Jul 8, 2009 (gmt 0)

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-position: top left;
background-repeat: repeat;

#border_a {
display: block;
width: 700px;
margin: 0px;
padding: 0px;
margin-left: auto;
margin-right: auto;
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-position: top right;
background-repeat: repeat-y;

<div id="border_a">
<div id="border_b">
10 pixel padding left and right i.e. if your vertical tiles are 10px wide.

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]

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved