Aufgrund dessen das mich meine alte Seite vom Layout und von der Userfreundlichkeit her ein wenig gestört habe und MrMurphy mich darauf hingewiesen hat das ich eine schlechte Struktur habe in meiner Seite,
habe ich begonnen dieses Projekt auf "Punkt 0" zu bringen.
Nun denn... angekommen wo ich nun bin, direkt das erste Problem.
Zunächst einmal mein CSS Code:
Code
/* Haupt Stylesheet */
/* Standard Elemente */
body { background-color: #FFF5E6 ;}
/* Spezielle Elemente */
#page-wrapper{
width: 1920px ;
height: 1080px ;
z-index: 1;
}
#header-wrapper{
display: block;
margin-left: auto;
margin-right: auto;
width:1200px;
height: 400px;
z-index: 1;
}
#header {
background: url(images/Header.png) no-repeat ;
background-size:50% 80%;
background-attachment:fixed;
background-position: center;
z-index: 3;
}
/* Fonts */und hier mein HTML Code:
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Meta Tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Ende Meta Tags -->
<!--Einbindung von Stylesheets, etc. -->
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="assets/css/main.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
<!-- Ende Style -->
<!-- Titel der Seite -->
<title>Maikäfer Flugbenzin</title>
<!-- Ende des Titels -->
</head>
<body class="homepage">
<div id="page-wrapper">
<!-- Header -->
<div id="header-wrapper">
<div id="header" class="container">
<!-- Logo -->
<h1 id="logo"><a href="index.html">Maikäfer Flugbenzin</a></h1>
<!-- Nav -->
<nav id="nav">
<ul>
<li>
<a href="#">Dropdown</a>
<ul>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Magna phasellus</a></li>
<li><a href="#">Etiam dolore nisl</a></li>
<li>
<a href="#">Phasellus consequat</a>
<ul>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Phasellus consequat</a></li>
<li><a href="#">Magna phasellus</a></li>
<li><a href="#">Etiam dolore nisl</a></li>
</ul>
</li>
<li><a href="#">Veroeros feugiat</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
<!--<h1>Herzlich Willkommen auf der Homepage der Wünnenberger Kräutermanufaktur.</h1><br><br>
<h2>Verkauf/Abgabe alkoholischer Getränke ab 18 Jahren!</h2>
<img alt="indeximg" id="indeximg" src="images/maikäferflugbenzin.png" width="400px" height="180px"><br>
<h2>Mit Ihrer Bestellung bestätigen Sie, dass Sie volljährig sind.<br>
Bitte seien Sie verantwortungsvoll im Umgang mit alkoholhaltigen Produkten<br></h2>
Hier gibt es Maikäferflugbenzin und andere Leckereien. <br><br>
Wir freuen uns, dass Sie auf unserer Seite sind und wünschen Ihnen viel Spass beim Stöbern und entdecken unserer Produkte.<br>
<br><br>
Hier haben Sie z.B. die Möglichkeit die Maikäfergeschichte in verschiedenen Sprachen herunterzuladen.<br> In der Rubrik "Herstellung" finden Sie ein vielfältiges Angebot an Likören.<br>
Unsere Produktpalette reicht von Magenbittern über Aromaliköre bis hin zu Fruchtlikören.<br>
<br>
Maikäferflugbenzin: Unser Klassiker, welcher sich weltweit größter Beliebtheit erfreut. Das spricht für sich und bedarf keiner weiteren Erklärung.<br>
16 heimische Kräuter verleihen der Geheimrezeptur ihren typischen Geschmack. Die ursprüngliche Rezeptur stammt aus einem alten Kräuterbuch der Benediktiner.<br>
<b>Probieren Sie unseren Likör.</b>-->
</body>
</html>
(Im anhang befindet sich das Background img)
So nun zu meinem Problem, ich schaffe es nicht, das "background-image" so zu positionieren das es vollkommen dargestellt wird im Header.
Screenshot:
Vielen Dank im Vorraus.
Gruss
Kuro
