2 replies [Last post]
jemes
Offline
Regular
Last seen: 7 years 42 weeks ago
Joined: 2005-11-10
Posts: 26
Points: 2

Is it possible to have a html image behind a background-image?

I have a background image which has a transparent area where I have an image slideshow looping through images.

At present the image slideshow is always ontop of the background image. So the detaling I have overlaying areas of the transparent section are not being seen.

Any help or ideas would be really helpful.

Thanks

Jemes

body {
	margin:0px auto;
	background: url(./bg.png) no-repeat top center;
	background-color:#ed008c;
	border:1px solid #000;
	width:967px;
	height:950px;
}
 
#slideshow1 {
	overflow:hidden;
	margin:169px 0px 0px 112px;
	width:291px;
	height:291px;
}

<div id="slideshow1">
    <img src="./pic2.png" alt="pic2" width="291" height="291" />
    <img src="./pic3.png" alt="pic3" width="291" height="291" />
    <img src="./pic.png" alt="pic" width="291" height="291" />
</div>

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 17 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

you will need to use

you will need to use position:absolute and effectively "stack" two divs on top of each other.

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

jemes
Offline
Regular
Last seen: 7 years 42 weeks ago
Joined: 2005-11-10
Posts: 26
Points: 2

I've treid that and the

I've treid that and the slideshow div is still on top?

body {
	position:absolute;
	z-index:2;
	margin:0px auto;
	background: url(./bg.png) no-repeat top center;
	background-color:#ed008c;
	border:1px solid #000;
	width:967px;
	height:950px;
}
 
#slideshow1 {
	position:absolute;
	z-index:1;
	overflow:hidden;
	margin:169px 0px 0px 258px;
	width:291px;
	height:291px;
}