Positionierung Bild unter div in css

Ich habe eine Frage bezüglich der Positionierung der beiden Objekte: das Bild und die div. Ich will bg2.png-Bild zu bleiben, unter div. Ich halte die Begegnung problem mit Bild-drängen-div-down von den img ' s Höhe. Wie kann ich das vermeiden?

Ich habe versucht, nach unten drücken Bild-mit "top" Wert, aber natürlich lässt mich mit leeren Bereich über div. Auch ich habe versucht, das hinzufügen negativen "top:" - Wert und der relativen position zu "maincontent" div aber wieder verließ er mich mit den leeren Bereich, der einzige Unterschied war, dass dieses mal war es unter den 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;
}

Vielen Dank im Voraus.

Bearbeiten - das, was ich versuche zu erreichen:
Klick mich!

warum nicht: #maincontent { background-image:('./images/bg2.png'); }
Argh, mich blöd an. Ich vergaß hinzuzufügen, dass ich nicht wollen, halten Sie das GESAMTE Bild unter div, nur ein Teil davon. Wie in diesem Beispiel: link

InformationsquelleAutor Dreamwalker | 2012-08-13

  1. 2

    2 Lösungen:

    Ändern Sie Ihre HTML-Struktur:

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

    oder machen Sie es als hintergrund-Bild:

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

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

    InformationsquelleAutor Mark

  2. 1
    <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>

    wenn Sie wollen, dass das Bild innerhalb des div-verwenden Sie diesen code. oder wenn Sie möchten, machen, Bild, hintergrund, div css background-Eigenschaft

    InformationsquelleAutor Anooj P

Schreibe einen Kommentar