[CSS] Hintergrundbild anpassen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
aenderung
auflsung
background
beitrag
bild
boxen
fallen
fenstergre
funktion
gre
gren
hintergrund
image
leiden
lsung
mglichkeit
positionsangabe
right
stattdessen
zwingen
-
Hallo, gibt es in CSS eine Möglichkeit, um die Hintergrundbildgröße an die Größe des angezeigten Browserbildes anzupassen? Ich binde das Hintergrundbild mit background-image ein.
Grüße, Moritz -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Du meinst das so, dass das Bild gestreckt oder zusammengeschoben wird, je nach fenstergröße?
Glaube das geht nicht und sieht aber auch nicht schön aus, da es immer unscharf ist.
Versuche es mal mit:
backround-repeat: repeat;
Somit wiedeholt sich das Bild, wenn es für die Fenstergröße nicht reichen sollte. -
OK, aber gibt es dann vielleicht einne Möglichkeit, das die linke untere Ecke immer unten links ist?
Grüße, Moritz -
# {
background: url(bg.jpg) no-repeat bottom right;
}
Das kannst du natürlich auch kombinieren:
# {
background: #000000 url(bg.jpg) no-repeat bottom right;
}
Damit hast du dann auch noch eine Farbe für den Rest der Seite drinnen!
Statt "no-repeat" kann auch "repeat-x" bzw. "repeat-y" eingesetzt werden.
Der erste Wert der beiden Positionsangaben gibt die vertikale Position an. In diesem Falle wäre das ganz unten. Stattdessen kann man "middle" oder "top" verwenden.
Der zweite Wert der beiden Positionsangaben gibt die horizontale Position an. In diesem Falle wäre das ganz rechts. Stattdessen kann man "center" oder "left" verwenden.
Beitrag geändert: 8.6.2007 21:57:21 von schrotti12 -
So, noch ne Frage ;)
Gibt es eine Möglichkeit um den Hintergrund (mit background) immer ganz anzuzeigen lassen?
Grüße, Moritz
Beitrag geändert: 10.6.2007 17:14:49 von moritzpeuser -
das müsste eigentlich mit background-repeat: no-repeat; gehen
so einen thread gabs schonmal;) -
Mit no-repeat geht es nicht. Gibt es eine andere Lösung?
-
also falls das nicht unbedingt mit css sein muss, geht das auch mit javascript und zwar gibst du dann dem body die id 1 und startest die funktion:
<body id="1" onload="bild()" background="bild1.jpg">
als funktion bild im head dann:
function bild() {
var x=screen.width;
var y=screen.height;
if (x==1024) {
document.getElementById("1").background="bild2.jpg";
}
}
hier wird jetzt nur bei einer auflösung von 1024 das bild angepasst(bild2 wird geladen), bei allen andern auflösungen wird bild1 beibehalten. hier kann man natürlich noch weitere änderungen einfügen.
Die Datei bild2 muss so eingerichtet sein das sie von der größe die erfordliche größe hat.
Also so hab ich das gemacht, allerdings könntest du das dann nicht mehr mit css machen was glaub ich sowieso nicht geht und 2. kannst du das bild nicht mehr als background-image einbinden, aber wenn dir das nichts aus macht hoffe ich das ich dir helfen konnte.
MFG
Tueddel -
Tut mir leid, aber ich will das ausschließlich mit CSS machen. Irgendeine Lösung muss es ja geben! Aber mir selbst fällt keine vernünftige ein.
Ich habe schon versucht, das ganze in eine Div-Box zu zwängen. Mein Code sieht dann so aus:
#background { background:url(background.jpg) no-repeat bottom left; top:0px; bottom:0px; right:0px; left:0px; }
Allerdings führt das auch zu keinem Ergebnis, weil eben nur die Box an die Ränder geht und nicht der Hintergrund. Der geht nur mit dem Text mit.
Grüße, Moritz
¤dit: OK, hat sich erledigt. Ich hab position:fixed; vergessen
Beitrag geändert: 10.6.2007 19:02:07 von moritzpeuser -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
