Displaying a div over the top of an img
Question
I have a relatively simple HTML layout where a div is meant to be displayed over the top of an img.
But what actually happens is that the div gets displayed below the image. Do you know how I can get the div with the id 'main' to be displayed over the top of the img with the id 'mainImg' (but the div also needs to be/remain centred).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kamalei - Home Page</title>
<style type="text/css">
<!--
html, body, div, form, fieldset, legend, label, img { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } th, td { text-align: left; } h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; } img { border: 0; }
#mainImg { z-index: -1; }
#main { text-align: center; width: 1000px; height: 700px; top: 0px; }
#navBar { float: left; width: 200px; height: 700px; /*margin-left: 10%; margin-top: 20%; padding: 30px; width: 20%;*/ }
#content { float: left; width: 800px; height: 700px; /*margin-right: 10%; margin-top: 20%; padding: 30px; width: 80%;*/ }
-->
</style>
</head>
<body>
<div id="heading">
<img src="images/heading.png" alt="" width="100%" height="300px"/>
</div>
<img id="mainImg" src="images/mainBackground.png" alt="" width="100%" height="100%"/>
<!-- the below div is meant to be displayed over the top of the above image but it actually get display below it -->
<div id="main">
<div id="navBar">
<img src="images/navBackground.png" alt="" width="100%" height="700px"/>
</div>
<div id="content">
<img src="images/contentBackground.png" alt="" width="100%" height="700px"/>
</div>
</div>
</body>
<!-- InstanceEnd -->
</html>
4 answers
solution1
1 2011-06-03 05:57:40
Instead of using an img tag for your site's background I would strongly suggest applying a background image style to a div or your body tag. That way you can keep a floated layout & the contents will appear above the image since your #main div can be nested inside the element with the backgrund image applied.
so for example css would be:
body { background:url('images/mainBackground.png'); }
and just remove the img (#mainImg) tag from your markup
you may also want to do this for your navigation
solution2
0 ACCPTED 2011-06-03 05:48:22
you must use the css property position: absolute for your div and then tamper with margins of the div to position it properly.
solution3
0 2011-06-03 05:55:29
Instead of referencing the image as an inline tag, try setting the CSS background properties of the content div itself. Something like this should do the trick:
#main {
background-image:url('images/mainBackground.png');
background-repeat:no-repeat;
}
solution4
0 2011-06-03 05:59:45
try this:
#mainImg {
left: 100px;/*adjust accordingly*/
position: relative;
top: 100px;/*adjust accordingly*/
z-index: 2;
}
z-index is for layering html elements.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.