You can do the faded background with CSS Generated Content
Demo at http://jsfiddle.net/gaby/WktFm/508/
Html
Css
.container{
position: relative;
z-index:1;
overflow:hidden; /*if you want to crop the image*/
}
.container:before{
z-index:-1;
position:absolute;
left:0;
top:0;
content: url(‘path/to/image.ext’);
opacity:0.4;
}
But you cannot modify the opacity as we are not allowed to modify generated content..
You could manipulate it with classes and css events though (but not sure if it fits your needs)
for example
.container:hover:before{
opacity:1;
}
UPDATE
You can use css transitions to animate the opacity (again through classes)
demo at http://jsfiddle.net/gaby/WktFm/507/
Adding
-webkit-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
transition: opacity 1s linear;
to the .container:before rule will make the opacity animate to 1 in one second.
Compatibility
FF 5 (maybe 4 also, but do not have it installed.)
IE 9 Fails..
Webkit based browsers fail (Chrome supports it now v26 – maybe earlier versions too, but just checked with my current build), but they are aware and working on it ( https://bugs.webkit.org/show_bug.cgi?id=23209 )
.. so only the latest FF supports it for the moment.. but a nice idea, no ? 🙂
.class {
/* Fallback for web browsers that doesn’t support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.6);
}
Copied from: http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/