Hintergrundbild und Hintergrundfarbe im selbes Element ??
Aqua
- html
0 Danny0 Ingo Turski
Hallo!
Hier ist ein Teil-Auszug aus meiner HTML-Datei:
<body style="background-color:#000000;">
<div style="width:500px; height:500px; background-image:url(foo.jpg); background-repeat: no-repeat;"> foobar </div>
</body>
Die Hintergrundfarbe des BODY ist schwarz,
und im BODY ist ein DIV, und das DIV hat ein sich NICHT wiederholendes
Hintergrundbild.
Nachdem das Hintergrundbild sich NICHT wiederholt,
scheint dort, wo das hintergrundbild aus ist
(es ist nur 40 x 40 px groß) wieder der schwarze Hintergrund
vom BODY durch.
Das DIV sollte aber einen WEIßEN Hintergrund haben.
Nun ist die Frage, ob ein Element sowohl Hintergrund-Farbe
als auch Hintergrund-Bild enthalten darf und beide GLEICHZEITIG
dargestellt werden.
Wenn ja, würde mein Lösungsansatz so aussehen:
<body style="background-color:#000000;">
<div style="width:500px; height:500px; background-image:url(foo.jpg); background-repeat: no-repeat; background-color:#FFFFFF;"> foobar </div>
</body>
---
Angenommen ein Element kann nicht gleichzeitig Hintergrundfarbe
und Hintergrundbild enthalten (das glaube ich,
weil ich glaube es war so dass die Hintergrundfarbe nur angezeigt wird
bis das Hintergrundbild geladen ist ...?!
dann würde mein Lösungsansatz so aussehen:
<body style="background-color:#000000;">
<div style="background-color:#FFFFFF; padding:0px;">
<div style="width:500px; height:500px; background-image:url(foo.jpg); background-repeat: no-repeat; margin:0px;> foobar </div>
</div>
</body>
----
Ich habe schon alles durchgetestet und Hintergrundfabe und
Hintergrundbild in dem selben Element funktioniert im IE,
aber ich weiß noch nichts über die Korrektheit wie es "gehört".
Welcher Lösungsansatz ist richtig und was könnt ihr mir zu meinen Ideen sagen bzw. ist keine meiner Ideen korrekt und wie geht es richtig?
Daaaanke ;o)
Aqua
Moin!
CSS-Angaben kann man eigentlich kombinieren wie man will, d.h. HG-Bild und HG-Farbe zusammen im Style ist valide und, soweit mir bekannt, gängige Praxis.
MfG
Danny
Hi,
CSS-Angaben kann man eigentlich kombinieren wie man will
Nein. So allgemein darf das nicht stehenbleiben für's Archiv.
Es gibt eine ganze Reihe von Eigenschafts-Kombinationen, die sich nicht vertragen (z.B. float und position), und einige Eigenschaften, die das zwingende Setzen anderer Eigenschaften erfordern (z.B. top, left, right, bottom erfordern position, oder: in bestimmten Fällen erfordert float auch width).
d.h. HG-Bild und HG-Farbe zusammen im Style ist valide und, soweit mir bekannt, gängige Praxis.
Bei den Hintergrund-Eigenschaften ist es aber in der Tat so, daß Hintergrundbild und Hintergrundfarbe kombiniert werden können (das Bild muß nicht die gesamte Fläche abdecken wg. repeat und muß auch auf der abgedeckten Fläche nicht überall Farbe haben wg. Transparenz) und m.E. auch sollten (da z.B. das Bild nicht immer zur Verfügung stehen muß, sollte eine passende Hintergrundfarbe angegeben werden, um ausreichend Kontrast zwischen Schrift und Hintergrund auch ohne das Bild zu garantieren).
cu,
Andreas
Hi Andreas,
geht klar. Dann werde ich in Zukunft versuchen, die Qualität meiner Antworten zu verbessern oder das nächste Mal lieber schweigen, wenn ich mir nicht wirklich sicher bin... ;)
MfG
Danny
Hi,
ich würde Dir gleich zur Kurzschreibweise raten:
background: white url(foo.jpg) no-repeat;
freundliche Grüße
Ingo