homepage Welcome to WebmasterWorld Guest from 54.198.148.191
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Best Way to Place Background Image to Page?
timothius




msg:3947392
 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?)

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]

 

PSWorx




msg:3948423
 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-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]

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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved