How is CSS used for these graphics?

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

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.

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

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

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.

web developer toolbar
has everything