WordPress.org

1. bahia0019
   Member
   Posted 10 months ago #

   Hello All,
   I am currently working on a design that is supposed to look like this:
   http://williambay.com/wptest/screen.jpg

   However,
   I cannot get the divs to show the PNG32's above the original one.
   This is my result:
   http://williambay.com/wptest/

   I guess my question is: Can transparent PNGs be placed on top of one another? And if so why is the background image not working in this situation?

   I suppose there are other ways to achieve this design, but I was hoping to do it this way since it would be quite a bit cleaner.

   Any thoughts or help is greatly appreciated!

   William

2. jleuze
   Member
   Posted 10 months ago #

   You could be using positioning in your CSS to overlap elements, a lot of designs have something like a fixed navbar at the top or bottom of the page that uses transparency of some sort to show the webpage below it.

   I think the easiest way to layer things with CSS is to setup a division with a background image, and add an image on top of that with HTML in the template.

   For what you are doing, I would take care to make sure that your design still looks good if the PNGs are not transparent. Otherwise your site will look pretty bad in Internet Explorer 6, since it doesn't support transparent PNGs.

   Looking at how you want your buttons and other elements to look, you might want to look into using CSS to have elements with varying opacity. Take a look at this tutorial on creating transparent images in CSS. But just like transparent PNGs, there are some browser issues that have to be dealt with.

Reply

You must log in to post.