Can multiple imgs form an image background? - html

Question

Be so kind as to look at this theme here. Look at that block of people's faces in the footer, faded, behind the 'create a nice banner like this with a few simple clicks' text. Can this effect be achieved with multiple img tags?
Now, the way they've done it is simple. They literally have one image of all of those cropped faces which they've set to 20% opacity in photoshop and simply set that as the background image of the div. I want to do the same effect, but with database-derived images, so that approach is useless to me.
So can I do the exact same effect, but through multiple img tags? Something that will work in IE 7,8,9? Something to do with z-indexes, perhaps?

Answer 1

Just use multiple image tags with CSS's opacity to do it. Something like this:
HTML
<img src="..." />
<img src="..." />
...
CSS
img {
opacity: 0.5;
vertical-align: middle;
}
http://jsfiddle.net/6Y5Qg/
You might have to use some tricks for older versions of IE, but all modern browsers will support this just fine.

Answer 2

Stacking divs would be the easiest... here's and example:
<style>
#wrap {}
#imgWrap {
padding: 0;
overflow: hidden;
height: 200px;
width: 500px;
z-index:1;
}
#imgWrap img {
float: left;
}
#container {
color: white;
margin-top: -200px;
width: 500px;
height: 200px;
z-index: 20;
background-color: black}
#container h1 {
margin: 0;
color: white;
padding-top: 50px;
text-align: center;
opacity: 1;
}
</style>
<div id="wrap">
<div id="imgWrap">
<img src="http://mymobileengagement.com/images/social-icons/pinterest/pintrest.png">
<img src="http://mymobileengagement.com/images/social-icons/pinterest/pintrest.png">
<img src="http://mymobileengagement.com/images/social-icons/pinterest/pintrest.png">
<img src="http://mymobileengagement.com/images/social-icons/pinterest/pintrest.png">
<img src="http://mymobileengagement.com/images/social-icons/pinterest/pintrest.png">
<img src="http://mymobileengagement.com/images/social-icons/pinterest/pintrest.png">
<img src="http://mymobileengagement.com/images/social-icons/pinterest/pintrest.png">
<img src="http://mymobileengagement.com/images/social-icons/pinterest/pintrest.png">
<img src="http://mymobileengagement.com/images/social-icons/pinterest/pintrest.png">
</div>
<div id="container">
<h1>TEST</h1>
</div>
</div>