Can multiple imgs form an image background?

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?

`img` elements usually make poor choices for a "background". Consider simply layering multiple (non image) elements, such as stacked divs, placing *all* the foreground content on them, and then using the CSS background property with appropriate offsets .. I have no idea what games are required for outdated rendering engines. — user2864740, Feb 28 '14 at 00:29

score 0 · Answer 1 · answered Feb 27 '14 at 23:55

0

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.

answered Feb 27 '14 at 23:55

Dryden Long

10,072
2
35
47

Not quite, text needs to appear above it, as in the theme forest example.. http://jsfiddle.net/6Y5Qg/1/ – Starkers Feb 27 '14 at 23:58
Then you'll want to use `z-index` and absolute positioning to do that. See here: http://stackoverflow.com/questions/8708945/how-to-position-text-over-an-image-in-css – Dryden Long Feb 27 '14 at 23:59
From the performance perspective I would consider pre-generating the faces background-image on the server. Sending many requests will cost You time. Specially if You keep alive is disabled. – czerasz Feb 28 '14 at 00:03

score 0 · Answer 2 · answered Feb 28 '14 at 01:22

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>

Can multiple imgs form an image background?

2 Answers2