Punkt 0 - Neubeginn

Kurokami

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 */

Alles anzeigen

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&auml;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&auml;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&auml;utermanufaktur.</h1><br><br>
                    <h2>Verkauf/Abgabe alkoholischer Getr&auml;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&auml;tigen Sie, dass Sie vollj&auml;hrig sind.<br>
                    Bitte seien Sie verantwortungsvoll im Umgang mit alkoholhaltigen Produkten<br></h2>
                    Hier gibt es Maik&auml;ferflugbenzin und andere Leckereien.  <br><br>
                    Wir freuen uns, dass Sie auf unserer Seite sind und wünschen Ihnen viel Spass beim St&ouml;bern und entdecken unserer Produkte.<br>
                     <br><br>
                    Hier haben Sie z.B. die M&ouml;glichkeit die Maik&auml;fergeschichte in verschiedenen Sprachen herunterzuladen.<br> In der Rubrik "Herstellung" finden Sie ein vielf&auml;ltiges Angebot an Lik&ouml;ren.<br>
                    Unsere Produktpalette reicht von Magenbittern über Aromalik&ouml;re bis hin zu Fruchtlik&ouml;ren.<br>
                    <br>
                    Maik&auml;ferflugbenzin: Unser Klassiker, welcher sich weltweit gr&ouml;ßter Beliebtheit erfreut. Das spricht f&uuml;r sich und bedarf keiner weiteren Erkl&auml;rung.<br>


                    16 heimische Kr&auml;uter verleihen der Geheimrezeptur ihren typischen Geschmack. Die ursprüngliche Rezeptur stammt aus einem alten Kr&auml;uterbuch der Benediktiner.<br>
                    <b>Probieren Sie unseren Lik&ouml;r.</b>-->


</body>


</html>

Alles anzeigen

(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

Grevas

background-size bezieht sich nicht auf die Grafik selbst, sondern auf den Container.
Es gibt da aber noch ein gotcha, wenn man background-attachment: fixed; verwendet wird das Bild relativ zum Fenster skaliert, nicht zum Container. (http://www.carsonshold.com/2013/02/css-ba…ed-positioning/ )

Sprich, man benutzt hier kein background-attachment sondern (wenn es denn fixed sein soll) position: fixed; auf den Container. Dadurch ist allerdings kein margin: auto; mehr möglich. Das macht bei deinem Konstrukt aber nicht's, da du einen vorgegeben Wrapper hast.

Code

#header-wrapper{
    display: block;
    margin-left: 360px;
    width:1200px;
    height: 400px;
    z-index: 1;
    position: fixed;
}


#header {
    background: url(https://placeholdit.imgix.net/~text?txtsize=33&txt=800%C3%97143&w=800&h=143) no-repeat ;
    background-color: black;
    background-size:50% 80%;
    /*background-attachment:fixed;*/
    background-position: center;
    z-index: 3;
}

Alles anzeigen

Kurokami

Danke für die Schnelle antwort, sehr Hilfreich.

Jetzt kann ich weiter arbeiten.