Zur Navigation

Hintergrundbild positionieren

1 fligor

Hi,

ich schäme mich schon fast. Habe per css dem body einen kleinen Farbverlauf zugewiesen. Dieser wiederholt sich auf der x-Achse und stellt den Basishintergrund dar.

Jetzt wollte ich per div ein Hintergundbild Hintergrund erzeugen, das 900px breit und 250px hoch ist. Dieses soll per background:url() eingefügt werden und soll immer in der Mitte sein. Klappt ja mit margin:auto, ohne weiteres... doch!

Jetzt kommt der inhalt und der ist ein weiteres div mit zentrierung und einer hintergrundfarbe. wie bekomme ich das div ebenfalls zentriert, allerdings über das andere Hintergrundbild. Per z-index klappt das Ganze nicht wirklich.

Hier mein Code:
css:
<!--

html{height:100%;}

body {color:#4b4b4b; background:url(bg.png); background-repeat: repeat-x; background-color:#bcd1dc; height:100%; margin:0px;}

div.blatt {background-color:#f4f5de; margin:auto; width:730px; min-height:800px; position:relative; top:150px; border-bottom: 2px solid #808080; border-right: 2px solid #808080; z-index: 2;}

div.footer {background-color:#f5f5f5; margin:auto; width:730px; position:relative; top:160px;}

div.bgtop {background:url(bgtop.png); margin:auto; width:900px; height:297px; position:relative; top:0px; z-index: -1;}

-->

html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
  <head>
    <title>meine seite</title>
    <meta name="description" content="meine desc" />
    <meta name="keywords" content="woerter" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>

<body>

<div class="bgtop">&nbsp;</div>

<div class="blatt">Guten Tag</div>

<div class="footer">Hier kommt Footertext</div>

</body>
</html>

Das Ganze nimmt in diesem Beispiel zwar die Centerposition ein, aber hat abstand wegen des "relative" ändere ich dies in absolute, so legt sich alles in die obere linke ecke! Hilfe!

MFG FLo

06.01.2009 17:38

2 Jörg

Jetzt kommt der inhalt und der ist ein weiteres div mit zentrierung und einer hintergrundfarbe. wie bekomme ich das div ebenfalls zentriert, allerdings über das andere Hintergrundbild.

Welches "andere Hintergrundbild"? von body oder von div.bgtop? bei zweiterem würde ich die divs einfach entsprechend verschachteln.

<div class="bgtop">

<div class="blatt">Guten Tag</div>

</div>

06.01.2009 18:53

3 fligor


bg.png ist nur n verlauf und bgtop.png ein nettes bild...

MFG FLo

06.01.2009 20:22 | geändert: 06.01.2009 20:23

4 fligor

gegen die wand renn... dankeschön

MFG FLo

06.01.2009 20:25

Beitrag schreiben (als Gast)





[BBCode-Hilfe]