Image overlaps

[LaineL]

G'day people,
Could someone please tell me how to achieve the effect shown in the attached file.
I would like to have an image (the same) in the top left corner of each page, a gradient border around the central container and an image (different on each page) in the bottom right corner. The images to overlap the corners of the central container.
Thank you in advance. :)
Laine
http://myweb.westnet.com.au/llarment/images/img.jpg

[JKnoch]

You want to know how to do this in HTML no photoshop right?

[JKnoch]

<div style="width:550px">
<div style="width:300px; height:300px; z-index:3; position:relative; background-color:#FF0000">
<div style="width:200px; height:200px; z-index:4; position:relative;margin:50px;background-color:#66FF00"></div>
</div>
<div style="width:400px; height:300px; z-index:1; position:relative; background-color:#0000FF; float:right; top:-250px" >
<div style="width:300px; height:200px; z-index:2; position:relative;margin:50px;background-color:#990099"></div>
</div>
</div>


Depending on the effect you are looking to make you can do this using 2 images or 4. The simple way would be to make the top picture and border 1 image with a transparentacy. The bottom image then could any type of image and that would change on every page.

The harder way would be two make 4 images. If you load up the code I provided, the blue and red layers will be the gradiant transparentcy images and the green and purple code with be the other images.

The easiest way to do this would be to do it like they did and and make this whole thing 1 picture, because in the end that is simplest and probally quickest.

[LaineL]

Thank you, I will give your helpful suggestions a try.
Cheers,
L

[LaineL]

Hoo-bloody-ray!!!! You steered me on to the 'layers' path. I have Dreamweaver, but have never explored it to any great lengths regarding layers.
Heaps of gratitude to you.
I'll have a nice cold beer on your behalf, tonight (our beer refrig keeps the tinnies at 1 degree celsius above freezing - just what we have needed over the last few days at 35 degrees celsius and better)
Lorraine

[Centauri]

Aarrrggghhh!! - there are no such thing as layers in html. "Layers" are a Dreamweaver term for "absolutely positioned div" - and you should always think of them as such, and only use them sparingly, and for effects such as overlapping objects.

Actually, you can absolutely positon the graphics themselves (making sure you have a relative position set on the overall site container so that the absolute positioning will not be referenced to the edge of the screen) without having to enclose them in a div (layer).

[LaineL]

G'day Centauri, I'm only new at this game and appreciate all the help I can get.
Although new to web design, etc, I'm rather ancient (66) so it takes me a while to get things sorted in the grey matter.
I'll keep working on the 'absolute position' thingy until I get it right.
Thanks again,
Cheers.