Making background transparent but not images on top

HTML & CSS
1

I’ve figured out how to make the page background semi-transparent using:

.custom #page {
    filter:alpha(opacity=80);
    opacity:0.8;
}

but I can’t get the graphics and text on the top to not be transparent. Z-index doesn’t seem to be working. Any ideas?

2

when you apply that effect, everything within the div goes transparent too. why dont you make your background image transparent in photoshop, save it as png and you are set

3

Hi,

Opacity applies to an element and all its children as a whole. Therefore when you make an element transparent you can’t suddenly say that you want its children non transparent because they have already been rendered as transparent. The element and all its children are drawn on the page and then the whole lot is made transparent.

That is one of the big drawbacks of using opacity.

With css3 you can use rgba to create a transparent background only but it doesn’t work in IE8 and under. Therefore the easiest solution is just to make a transparent png image instead and repeat it on your outer. The only problem then is IE6 and you would need to use the alpha image loader filter if you wanted ie6 support.

There is actually a method using opacity but it means changing the html a bit. The transparent background is applied to a separate element form the content and then shimmed underneath with absolute positioning.

We had a css quiz a while ago about this very subject. Here was [URL=“http://www.pmob.co.uk/temp/quiz20-answer.htm”]the example from the quiz.

4

Wow, that CSS test is a perfect example, thanks!

But I’m all for the easiest solution. :smiley: So you mean I should make a PNG of the inner section of that entire photo and apply it to the page background? My question then would be, what if I add something and the page gets longer?

5

No, I meant just create a 10px x 10px semi transparent png at the opacity required. Just repeat it on your container and it will grow as required. :slight_smile:

6

Ah, perfect. Thank you so much; it works awesome! Always glad to add another trick to my slowly growing CSS repertoire. :slight_smile:

7

…or. Here is a simple cross browser rgba method. { visibility: inherit; } Cross Browser Modern CSS Opacity With RGBA