1
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
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!
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"> </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!