Funktioniert im FF nicht
toastbrot
- css
Hi ich habe im Photoshop eine Hintergrundbild erstellt, größe 900x700px.
Ich wollte es in der Mitte positionieren und hab das mit folgendem Befehl realisiert.
background-image: url(../Bilder/tutgut.png);
background-position: center;
background-repeat: no-repeat;
background-color: #8DB801;
das Problem ist, dass es im Firefox nicht funktioniert, im IE dagegen schon. Wenn ich die Positionierung weglasse funktionert es aber sobald da center steht ist das Bild weg. Woran liegt das? Kennt firefox den Befehl nicht? Kann ich das Bild anders in der Mitte platzieren?
Grüße und danke für die Hilfe
Hi,
background-image: url(../Bilder/tutgut.png);
background-position: center;
background-repeat: no-repeat;
background-color: #8DB801;
kurz nachgefragt: Auf welches Element hast du die Background-Eigenschaften angewendet, und welche evt. noch?
Gruß Gunther
Hi also das mit 50% 50% funktioniert auch nicht, ebensowenig we 50%.
Ich weiß leider nicht genau was du meinst Gunther. Ich habe erst angefangen mit der Seite und noch nicht viel definiert.
Das ist alles was ich bisher habe:
*{
padding:0px;
margin:0px;
}
body{
background-image: url(../Bilder/tutgut.png);
background-position: center;
background-repeat: no-repeat;
background-color: #8DB801;
font-family: Trebuchet MS, Verdana, Arial, sans-serif;
font-size: 80%;
}
#inhalt{
width: 580px;
height: 500px;
position: absolute;
top: 238px;
left: 380px;
color: #fff;
overflow: auto;
}
Hi,
background-image: url(../Bilder/tutgut.png);
background-position: center;
background-repeat: no-repeat;
background-color: #8DB801;kurz nachgefragt: Auf welches Element hast du die Background-Eigenschaften angewendet, und welche evt. noch?
Gruß Gunther
Hi,
Das ist alles was ich bisher habe:
*{
padding:0px;
margin:0px;
}body{
background-image: url(../Bilder/tutgut.png);
background-position: center;
background-repeat: no-repeat;
background-color: #8DB801;
font-family: Trebuchet MS, Verdana, Arial, sans-serif;
font-size: 80%;
}#inhalt{
width: 580px;
height: 500px;
position: absolute;
top: 238px;
left: 380px;
color: #fff;
overflow: auto;
}
füge davor noch ein:
html, body {
height: 100%;
width: 100%;
}
Gruß Gunther
Hi,
#inhalt{
ist das Element mit der id "inhalt" das einzige, was sich im body befindet?
Wenn ja, wäre wegen
position: absolute;
die Höhe von body 0, da sich nichts darin befindet, was eine Auswirkung auf seine Höhe hätte.
Wenn body also eine Höhe von 0 hat, ist damit natürlich auch der sichtbare Bereich des im body befindlichen Hintergrundbildes 0px hoch ...
cu,
Andreas
Hi ich habe zwar nicht genau verstanden was MudGuard gemeint aht aber mit dem Tipp von Andreas hat das wunderbar funktioniert:-D
Vielen Vielen dank, ich wäre nicht selber darauf gekommen.
So und nun wünsch ich euch ein guts nächtle., jetzt kann ich in Ruhe schlafen
Grüße
Hi,
#inhalt{
ist das Element mit der id "inhalt" das einzige, was sich im body befindet?
Wenn ja, wäre wegen
position: absolute;
die Höhe von body 0, da sich nichts darin befindet, was eine Auswirkung auf seine Höhe hätte.
Wenn body also eine Höhe von 0 hat, ist damit natürlich auch der sichtbare Bereich des im body befindlichen Hintergrundbildes 0px hoch ...
cu,
Andreas
Kurze Korrektur: ich meinte natürlich Tipp vn Gunther, sorry
Hallo
Hi ich habe zwar nicht genau verstanden was MudGuard gemeint aht aber mit dem Tipp von [Gunther] hat das wunderbar funktioniert:-D
Vielen Vielen dank, ich wäre nicht selber darauf gekommen.
Genau das Gleiche hat dir MudGuard aus einem anderen Blickwinkel gesagt. Du hattest dem <body> keine Angaben zu Breite und Höhe gegeben.
Da du dein Inhaltselement mit position:absolute; aus dem normalen Dokumentfluss herausgenommen hast, wurde der <body> auch nicht auf irgendeine von 0 unterschiedliche Größe gebracht.
In einem Element (hier <body>), welches 0 mal 0 Pixel groß ist, kann aber kein Hintergrundbild angezeigt werden.
Tschö, Auge
Achso jetzt habe ich das auch erstanden. DAnke für die Erklärung!
Hallo
... jetzt habe ich das auch erstanden.
Wieviel hat's gekostet? ;-)
*scnr*
Tschö, Auge
Hallo
schonmal so probiert:
background-position:50% 50%;??
MFG Hagen
Hallo Hagen.
schonmal so probiert:
background-position:50% 50%;??
Ist äquivalent zu „background-position:center center“ ist äquivalent zu „background-position:center“.
Einen schönen Donnerstag noch.
Gruß, Ashura