layering two images

[TMac42]

I've got a footer image has part of the left side of it cut out w/ a transparent background. What I want to do is to layer an image behind this (aligning with the bottom left corner of the top image) so that it can be seen through the transparent areas of the top image. How is this done? I'm still getting started on CSS so I'm a noob and appreciate any help. Thanks.

 

[cLFlaVA]

try supplying a background style. here's an example:

<img src="blah" style="width: 120px; height: 60px; background: transparent url([URL unfurl="true"]http://www.tek-tips.com/images/partnerbtn120x60.gif)[/URL] no-repeat bottom left;" alt="something" />

*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[TMac42]

Thanks for the tip. What about this scenario... the background image is taller than the image it will lay behind and it needs to extend say 350px wide while the top footer image is more like 650px wide. So, the background will only extend about 50% behind the top layer footer image. If I use your code above, it's on the right track but it limits the background image to the same height as the other image *and* it also maintains the width of the background image which is only something like 9px and I need it to be much wider obviously. Thoughts?

Thanks again. Much appreciated.

 

[cLFlaVA]

this would be much easier with some real code, or a link to what you've tried so far.



*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[TMac42]

<img src="design/myFooter.gif" style="width: 760px; height: 60px; background: transparent url(design/background.gif) no-repeat bottom left;" alt="something" />

myFooter is: 760x60px
background is: 5x192px

-background needs to extend to the right a total of 360px
-the two images share the same lower left corner and I need to snap them into the lower left corner of a table cell in a current layout I'm working on.

Thanks.

 

[cLFlaVA]

you will probably want to apply the background to the td, rather than the image. to push it to the right 360px, do this:

<td style="background: transparent url(design/background.gif) no-repeat 360px 0px;">
    <img src="design/myFooter.gif" style="width: 760px; height: 60px;" alt="something" />
</td>

*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]