Home/ Questions/Q 8360453
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T11:28:18+00:00

I’ve got a question regarding positioning of two objects: image and div. I want

  • 0

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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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;
}
    • 0