CODEWITHSUNDEEP
csspositioning
Dreamwalker
Dreamwalker

Reputation: 43

Positioning image under div in css

I've got a question regarding positioning of two objects: image and div. I want bg2.png image to stay under div. I keep encountering problem with image pushing div down by img's height. How do I avoid that?

I tried pushing down image with "top:" value but of course it leaves me with empty area above div. Also I tried adding negative "top:" value and relative position to "maincontent" div but again it left me with empty area, only difference was that this time it was under the div.

HTML:

<body>
 <img src="./images/bg2.png" class="bgimg" />
 <div id="maincontent">
 </div>
</body>

CSS:

body {
    width: 100%;
    background: #000;
}
.bgimg {
    z-index: -1;
    overflow: hidden;
    left: 70px;
    position: relative;
    display: block;
}
#maincontent {
    height: 520px;
    width: 960px;
    margin: 20px auto;
    display: block;
    z-index: 8;
}

Thanks in advance.

edit - what I'm trying to achieve: Click me!

Upvotes: 2

Views: 36351

Answers (2)

Anooj P
Anooj P

Reputation: 346

<style>
body {
    width: 100%;
    background: #000;
}
.bgimg {
    z-index: -1;
    overflow: hidden;
    left: 70px;
    position: relative;
    display: block;
}
#maincontent {
    height: 520px;
    width: 960px;
    margin: 20px auto;
    display: block;
    z-index: 8;
}

</style>

<body>

 <div id="maincontent">
     <img src="./images/bg2.png" class="bgimg" alt="some info about image here">
 </div>
</body>

if you want that image inside the div use this code. or if you want make that image background of that div use css background property

Upvotes: 1

Mark
Mark

Reputation: 6855

2 solutions:

Change your HTML structure:

<body>
 <div id="maincontent">
 </div>
 <img src="./images/bg2.png" class="bgimg" alt="some">
</body>

or make it as the background-image:

<body>
  <div id="maincontent">
  </div>
</body>

#maincontent {
 background: url(./images/bg2.png) no-repeat 0 100%;
 padding-bottom: height_of_image_in_px;
}

Upvotes: 3

Related Questions