Per CSS Bild im Hintergrund immer an genaue Browserbreite skalieren
hey folks,
ich habe ne website mit nem hintergrund bild, das per css rein kommt. Ziel ist es das hintergrundbild automatisch an die browser auflösung anzupassen, sodass nur ein bild für alle auflösungen verwendet werden kann. 
Hier der Code
Weiß jemand von euch mehr mit dem CSS gefrickel anzufangen?
Bin für jede rückmeldung dankbar.
schönen Abend
PETER!
body {
background-image: url(../images/body_bg.jpg);
background-repeat: repeat-x;
background-color: #000000;
margin-top:0px;
margin-bottom:0px;
Weiß jemand von euch mehr mit dem CSS gefrickel anzufangen?
Bin für jede rückmeldung dankbar.
schönen Abend
PETER!
Antworten
- Mehr
Auf Facebook teilen
Auf Twitter teilen7 Antworten
- LÖSUNG StefanKittel schreibt am 24.10.2011 um 21:49:26 Uhr
- LÖSUNG peterha schreibt am 24.10.2011 um 21:56:09 Uhr
- LÖSUNG StefanKittel schreibt am 24.10.2011 um 22:01:47 Uhr
- LÖSUNG peterha schreibt am 24.10.2011 um 21:56:09 Uhr
- LÖSUNG Claclaq schreibt am 24.10.2011 um 22:14:08 Uhr
- LÖSUNG peterha schreibt am 25.10.2011 um 08:26:05 Uhr
- LÖSUNG peterha schreibt am 25.10.2011 um 20:33:01 Uhr
- LÖSUNG Naderio schreibt am 11.11.2011 um 11:05:38 Uhr
- LÖSUNG peterha schreibt am 25.10.2011 um 20:33:01 Uhr
- LÖSUNG peterha schreibt am 25.10.2011 um 08:26:05 Uhr
LÖSUNG 24.10.2011 um 21:49 Uhr
LÖSUNG 24.10.2011 um 21:56 Uhr
LÖSUNG 24.10.2011 um 22:01 Uhr
Hallo,
das mit der Breite ist ein Problem, da HTML, CSS oder PHP ja gar nicht wissen wie groß Dein Monitor ist.
Geht eigentlich nur mit Skripten (soweit ich weiß).
Stefan
http://www.php.de/php-tipps-2005/11578-aufloesung-mittels-php-erkennen- ...
das mit der Breite ist ein Problem, da HTML, CSS oder PHP ja gar nicht wissen wie groß Dein Monitor ist.
Geht eigentlich nur mit Skripten (soweit ich weiß).
Stefan
http://www.php.de/php-tipps-2005/11578-aufloesung-mittels-php-erkennen- ...
LÖSUNG 24.10.2011 um 22:14 Uhr
Hallo Peter
Es stimmt schon, was Stefan sagt. Mit Javascript (jQuery) kommst Du aber sicher weiter: Schau Dir mal hier die Demo an.
LG CQ
Es stimmt schon, was Stefan sagt. Mit Javascript (jQuery) kommst Du aber sicher weiter: Schau Dir mal hier die Demo an.
LG CQ
LÖSUNG 25.10.2011 um 08:26 Uhr
hey leute,
guten morgen!
schaut mal was ich gefunden habe:
So solls sein:
http://benwildner.de/demo/automatic-scaling-background-css/
hier das how to:
http://benwildner.de/2010/01/how-to-hintergrund-browserfullend-skaliere ...
Mein Problem: Ich habe den CSS Code in mein CSS kopiert, es zeigt aber keinerlei wirkung. weiß jemand von euch wie es mit meinem obigen code kombiniert werden könnte?
danke für jede rückmeldung!
Peter
guten morgen!
schaut mal was ich gefunden habe:
So solls sein:
http://benwildner.de/demo/automatic-scaling-background-css/
hier das how to:
http://benwildner.de/2010/01/how-to-hintergrund-browserfullend-skaliere ...
Mein Problem: Ich habe den CSS Code in mein CSS kopiert, es zeigt aber keinerlei wirkung. weiß jemand von euch wie es mit meinem obigen code kombiniert werden könnte?
danke für jede rückmeldung!
Peter
LÖSUNG 25.10.2011 um 20:33 Uhr
LÖSUNG 11.11.2011 um 11:05 Uhr
hmm...ich hoffe das ist ein Ansatz:
im Quellcode das Bild platzieren:
Dann im CSS:
Natürlich muss das Bild im z-index ganz hinten liegen, oder im HTML konstrukt seperat liegen.
Das war jetzt nur so eine Idee, das Bild streckt sich so nun immer auf Browserfenstergröße. Hoffe das Hilft dir
MfG
Naderio - Thomas G.
EDIT:
Habs nochmal überarbeitet. Jetzt funktioniert es.
im Quellcode das Bild platzieren:
<div id="stretch">
<img id="hintergrund" src="images/bild.jpg" />
</div>img[id="hintergrund"] {
width: 100%;
height: 100%;
}
div[id="stretch"] {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}Das war jetzt nur so eine Idee, das Bild streckt sich so nun immer auf Browserfenstergröße. Hoffe das Hilft dir
MfG
Naderio - Thomas G.
EDIT:
Habs nochmal überarbeitet. Jetzt funktioniert es.
