nicht angemeldet
Problem mit Header Background
Matthias Apsel
Gunnar BittersmannHallo 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
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
akzeptierte Antworten
Problem mit Header Background
Henry
Bewertung: keine Bewertung
-
Hallo Code_D,
https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML-Einstieg
Bis demnächst
Matthias--
Rosen sind rot. -
Hallo Code_D,
Es gibt hier im Forum dazu schon einige beantwortete Fragen.
Auf die Schnelle hilft dir zb. display:block;
<img style="display:block;" src="bilder/banner2.jpg" class="banner" width="100%">Natürlich besser im CSS, zumal ja die class="banner" schon existiert, wenn auch nicht hier aufgeführt.
Gruss
Henry-
vielen lieben Dank für eure Antworten. Ich bin mit Tutorials von html-seminar.de und selfhtml.org bedient und werde mich noch weiter einlesen 😀
@Henry deine Lösung hat wunderbar geklappt! Jetzt kann ich es auch als CSS einbinden 👍
-
-
@@Code_D
<img src="bilder/banner2.jpg" class="banner" width="100%">An der Stelle fehlt das zwingend notwendige
alt-Attribut.Wenn die Grafik Inhalt ausdrückt, der auch dargestellt (von Screenreadern angesagt) werden muss, wenn das Bild nicht geladen wurde bzw. nicht gesehen werden kann bspw.:
<img … alt="Website von Example dot com">Wenn das Bild nur dekorativ ist (und nicht per Stylesheet als Hintergrundbild eingebunden wird), ist ein leerer Wert fürs
alt-Attribut zu setzen (Screenreadern lesen sonst den Dateinamen vor):<img … alt="" role="none presentation">LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann