CSS Forum

**philmetz** · 01-31-2010, 10:24 AM

I am trying to do something like this with a background image:
http://www.sharpmea.com/cps/rde/xchg...office-mfp.htm

See the way the trees are there and that it has a gap in the middle and you see the top of the image at the top and down at the bottom you see the borrom of the image. How can i achieve that?

**wongpk** · 01-31-2010, 02:26 PM

2 images...

CSS:
body {background: url(image_url) no-repeat top center;}
#overall {background: url(image_url) no-repeat bottom center;}

HTML:
<html>
<head>
<body>
<div id="overall">



</div>
</body>
</html>

**solvision** · 08:17 PM

two things can help you to discover how the page is constructed.

In this case right-clicking on the image and selecting "View Image", sometimes you'll find a banner is made up of a ton of images rather than a single banner. By doing this you see that the code above is not complete. (You still need to wrap the content and center it) if you assign the top image to the BODY tag, it will not be in a centered site like this one.

Then do a search for CSS web developer toolbar (you need Firefox), you can view the CSS used in a website, as well as a lot of other stuff, like resizing the browsers to specific resolutions for example.

Download it then go back to this site and choose "View CSS" it will show you exactly how they did it. Combine this with viewing the Page Source, and you will understand their DIV structures.

**gsat2002** · 02-01-2010, 09:39 AM

edit the image using photoshop..

**mcook** · 02-01-2010, 01:22 PM

Here is a helpful link for using large backgrounds:

http://www.webdesignerwall.com/tutor...ge-background/

**LadynRed** · 02-01-2010, 08:48 PM

Two tools to help you - Firebug and Web Developer Toolbar - both extensions are a must if you're serious.