Transparent Background, Opaque Elements

I want to have an image background on body and a semitransparent background on main div, so that the image can be seen through it, but shaded. However, the easiest body { backgro

Solution 1:

rgba helps you, but it is not supported by all browsers

usage:

rgba(a,b,c,d), wherea= red(0-255); b = green(0-255); c = blue(0-255), d = alpha opacity(0-1)

so if you want a 50% red background, you should use

background: rgba(255,0,0,0.5);

Solution 2:

If you can use CSS3 for your project you can use rgba()

#main {
  background-color: rgba(0, 0, 0, .5)
}

The syntax is rgba(Red, Green, Blue, Alpha). This will make the background of #main transparent but not the content.

Here is fiddle: http://jsfiddle.net/neilheinrich/FwxRX/

Solution 3:

If you create a semi transparent png file a couple of pixels large and in the colour you are after then add that as the background image of main you should get the desired result.