How is CSS used for these graphics?

[wickedmoon]

http://www.duirwaighgallery.com/sect...php?section=11

I'm trying to figure out what's going on with graphics and CSS on this page. Is this image, http://www.duirwaighgallery.com/bg/b...g/bg_paper.jpg, tiled from the top left of the page, with several other header and footer graphics placed over it? I like how they've designed it to be seamless. I don't think there are any PNGs with transparency, just gifs. I think that says more about the design of the graphics than the CSS.

Does this image, http://www.duirwaighgallery.com/bg/b...bg_navitop.jpg, begin at the right edge of the main header graphic, or does it tile underneath? I'm trying to get some ideas for what's possible with my own graphics. I see a space.gif in the code. Is that just a spacer gif or for some other purpose? Are there any noteworthy techniques for how they're manipulating graphics? It seems if I want to do something similar I need to experiment with elements like z-index.

Jason

[alexgeek]

it's quite easy,
the div with this image
Is width 100% of the whole page, so it goes across the whole page and repeats the background.

[Jack Franklin]

My guess is the paper image is in 1 div and has width: 100%. The top image is in another div placed above that with width: 100%. I may be completely wrong! That would be one way of doing it, however.

Jack

[AdRock]

If you use Firefox, you could get some add-ons so you can see the source CSS of sites you are viewing

I use CSSViewer, Firebug and for validating CSS I use CSS validator

You can hover different elements of the page and see the CSS used for it

Also you could look for an add-on called web developer

[wickedmoon]

Thanks for the tips, I'll try those. I discovered firebug a few days ago and used it on the page. Still confusing though, short of setting everything up in dreamweaver and pulling it apart bit by bit.

[alexgeek]

web developer toolbar
has everything