Code_D: Problem mit Header Background

Beitrag lesen

SELF-Forum

Problem mit Header Background

Code_D
– Informationen zu den Bewertungsregeln

Hallo Leute,

ich habe ein Problem mit dem Einbinden eines Hintergrundbildes in den Kopfbereich.

Ich benutze 4 Inhaltsbereiche mit jeweils einer unterschiedlichen background-color (rot, grün, gelb, blau). Binde ich das Hintergrundbild für den Kopfbereich in HTML ein ist das Bild ersichtlich und auch die Größe ist optiomal auf den Monitor angepasst. Aber es ist immer noch die Rote Hintergrundfarbe ersichtlich.

So siehen die html und css bereiche aus..

HTML Variante1

<body>
    
        <div id="kopfbereich">
        <!--<p>Logo</p>-->
        <img src="bilder/banner2.jpg" class="banner" width="100%">
        </div>
        
        <div id="steuerung">
        <p>Bereich: Menü</p>
        </div>
        
        <div id="schatten">
        <p>Schatten</p>
        </div>
        
        <div id="inhalt">
        <p>Bereich: Inhalt</p>    
        </div>
    
    </body>

CSS

#kopfbereich {
    background-color: red;
}

#steuerung {
    background-color: green;
}

#schatten {
    background-color: yellow;
}

#inhalt {
    background-color: blue;
}

* {margin: 0; padding: 0;}

Ergebniss Bild in HTML eingebunden - Rote Linie!

Variante 2:

Da lösche ich aus dem HTML-Bereich <img src="bilder/banner2.jpg" class="banner" width="100%">

... und füge dafür in der CSS-Datei folgendes ein

#kopfbereich {
    background-color: red;
    background: url(bilder/banner2.jpg) ;
    width: 100%;
}

Da verschwindet das komplette Bild. Gebe ich die Masseinheiten in PX an, erscheint das Bild zwar, ist aber in einer Größe die ca. einem 65" TV ähnelt 😂

Die Seite die ich aufbauen möchte baue ich jetzt zum zweiten mal "als Übung nach". Beim erstenmal habe ich den Header in den <head> gesteckt und gut war's. Aber ich denke da gibt es eine andere Lösung, oder? Ich bin noch anfänger, also bitte nicht gleich in der Luft zerfetzen :-)

Danke & Liebe Grüße, Code_D

Beitrag melden
–
Informationen zu den Bewertungsregeln

akzeptierte Antworten