<!DOCTYPE html>
<html>
<title>Titel</title>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0 "/>
<meta http-equiv="cleartype" content="on" />
<link type="text/css" rel="stylesheet" href="style.css" media="screen" />
<link href="styles/jquery.fs.naver.css" type="text/css" rel="stylesheet" />
<script language="javascript" type="text/javascript">
document.createElement("header");
document.createElement("nav");
document.createElement("section");
document.createElement("footer");
</script>
</head>
<body>
<header>
<img src="bild.gif" />
<p>Ueberschrift</p>
</header>
</body>
</html>
*{ padding: 0px;
margin: 0px;
}
html, body
{ margin: .3%;
}
header, nav, section, footer, article {
display: block;
}
header{ height: 150px;
/*height:20%;*/
background-image: url(tapeten/bild.png);
}
header img {
float: left;
background-color: #FF0000;
margin-left: 2%;
}
header p{font-size: 1.2em;
line-height: 1.4em;
font-weight: bold;
}Hallo,
ich habe bis jetzt noch nicht etwas Grundlegende verstanden!
Warum sich die Höhe des backround-image des Header sich nur nach dem Text "Ueberschrift" richte und nicht nach dem Bild das Pixelmäßig größer ist!
Das Bild steht in der Höhe also hinaus. Wenn ich bei Header im Css height:20%; angebe passiert nichts aber wenn ich z. b. 150px eingebe ist das Bild innerhalb des background-images im header.
Irgendwie habe ich den Eindruck das Bild legt sich drüber. Aber wieso? Es ist doch im <header> </header> ?? Und wieso geht Prozent % nicht aber Pixel?
Danke