Div Container: Hintergrundbild an Fenster anpassen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
auftauchen
bild
boxen
code
container
dank
eigenschaft
fehler
frage
funktioniert garnichts
hintergrund
http
image
papierkorb
sagen
solid code
spielplatz
url
vorhanden url
woche
-
Hallo.
Ich bin grad dabei mich mit div-containern ausernanderzusetzen und stehe vor folgendem Problem:
Wie kann ich die Hintergrundbilder in den Containern automatisch an das Vrowserfenster anpassen? Funktioniert das überhaupt? Ich habs mit width="100%" versucht, dann nimmt er aber 100% vom Bild, dann hab ichs mit width="*" und width="auto" versucht, aber es funktioniert garnichts.. Hab auch schon im Internet gesucht aber nichts brauchbares gefunden. Hat jemand eine Idee? Danke im voraus. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Oder Du kannst ein bisschen "tricksen".
Das machst Du so das Du ein <img>-bild nimmst und es durch z-index als Hintergrundbild nutzt.
http://www.cssplay.co.uk/layouts/background.html
So werden Die Bilder auch in Browsern unterstützt die (noch) nicht css3 unterstützen. -
Hmm.. Danke erstmal..
thomasba schrieb:
Die CSS3 Eigenschaft background-size könnte was für dich sein
Laut dem müsste es so funktionieren:
div {
background-image: url(plasma.png);
background-repeat: no-repeat;
background-size: 100% 100%;
background-origin: content-box }
Tut es aber nicht. Kann aber an der HTML datei liegen..
Auf der anderen Seite hab ich keine Informationen gefunden.
Also das ist der Body des HTML Quelltext:
<div
class="bg" style="position:absolute; width:15%; height:100%;
z-index:1; background-color: #000000; border:0px; solid:#000000; left: 0px; top:
15%"></div>
<div
class="bg2" style="position:absolute; width:100%; height:15%;
z-index:1; background-color: #000000; border:0px; solid:#000000; left: 0%; top:
0%"></div>
<div
class="bg3" style="position:absolute; width:100%; height:100%;
z-index:1; background-color: #000000; border:0px; solid:#000000; left: 15%; top:
15%"></div>
Und das dazugehörige CSS laut der Seite:
div.bg {
background-image: url(leftbg.gif);
background-repeat: no-repeat;
background-size: 100% 100%;
background-origin: content-box
}
div.bg2 {
background-image: url(topbg.gif);
background-repeat: no-repeat;
background-size: 100% 100%;
background-origin: content-box
}
div.bg3 {
background-image: url(mainbg.gif);
background-repeat: no-repeat;
background-size: 100% 100%;
background-origin: content-box
}
Könnt ihr mir sagen wo da der Fehler ist?
Beitrag zuletzt geändert: 13.8.2011 2:42:24 von yorecords -
Ich mag das, wenn jede Woche irgendwo die selben Fragen auftauchen :D
http://www.lima-city.de/thread/100-hintergrund -
yorecords schrieb:
Könnt ihr mir sagen wo da der Fehler ist?
Kein Fehler vorhanden
Vielleicht liegt's am Doctype?
fabo schrieb:
Ich mag das, wenn jede Woche irgendwo die selben Fragen auftauchen :D
http://www.lima-city.de/thread/100-hintergrund
Ich sollte mir Kopien meiner Antworten bereitlegen für's nächste mal
p.s.
Das hier:
border:0px; solid:#000000
Ist natürlich müll.
richtig wäre:
border: 1px #000 solid;
p.p.s.
und bei top gehört ein
an's Ende;
Beitrag zuletzt geändert: 13.8.2011 5:39:49 von simuliertes -
Danke. Problem gelöst.
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
