CSS transparent background fallback when images are disabled

Question

I have a DIV with a transparent PNG background applied to it. Is there a way (use of JS is fine) for me to:

1. Have the transparency effect when images are enabled
2. Apply a normal solid background color to it when images are disabled

Answer 1

You should be able to supply both a css background-image and background-color. If images are disabled the color should still show up.

Answer 2

I think you are looking for a

jQuery lightbox

like thing.

Answer 3

Another solution that comes to my mind is that you could set up a solid background by default, then load the image(s) with JavaScript and apply transparency. If someone will have JS disabled or image download will fail then you will have the default solid background.

Answer 4

As I remember, if you set background-color and background-image, that would not work with transparent PNGs (over the transparency you will see background-color). Te solution is to use a special css class:

.trans_back { background:red }
DIV#trans_png { background:url(reddot.png); position:absolute; left:-9px; }

Then make a script:

$().ready(function(){
  $('#trans_png').load(function(){
    $('.tans_back').css('background',$(this).css('background'));
  });
});

DIV#trans_png is used to check if image is loaded, you can do it in way you like, I prefer simplest without scripting.