peterha
Oct 24, 2011 at 19:36:39 (UTC)
view6403
view7
0
Goto Top

Per CSS Bild im Hintergrund immer an genaue Browserbreite skalieren

GermanQuestionCSSDevelopment

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. face-smile

Hier der Code

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. face-smile

schönen Abend
PETER!
comment-contentCommentShareShare
Share on Facebook Share on Twitter Share on Reddit Share on Linkedin

Content-Key: 175215

Url: https://administrator.de/contentid/175215

Printed on: April 18, 2024 at 21:04 o'clock

7 Comments
Latest comment
Goto Top
Member: StefanKittel
StefanKittel Oct 24, 2011 at 19:49:26 (UTC)
Goto Top
Hallo,
warum nicht im Body?
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red" background="Bottom_texture.jpg">

Stefan
Member: peterha
peterha Oct 24, 2011 at 19:56:09 (UTC)
Goto Top
hey Stefan,

weil im body an der stelle noch ein bild drüber liegt... bzw mal video mal flash

vg
Christoph
Member: StefanKittel
StefanKittel Oct 24, 2011 at 20:01:47 (UTC)
Goto Top
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- ...
Member: Claclaq
Claclaq Oct 24, 2011 at 20:14:08 (UTC)
Goto Top
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
Member: peterha
peterha Oct 25, 2011 at 06:26:05 (UTC)
Goto Top
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
Member: peterha
peterha Oct 25, 2011 at 18:33:01 (UTC)
Goto Top
anybody? face-smile) per mir final hilft bekommt nen 10er für ne tafel schokolade per paypal. face-smile
Member: Naderio
Naderio Nov 11, 2011 at 10:05:38 (UTC)
Goto Top
hmm...ich hoffe das ist ein Ansatz:

im Quellcode das Bild platzieren:

<div id="stretch">  
<img id="hintergrund" src="images/bild.jpg" />  
</div>

Dann im CSS:
img[id="hintergrund"] { 
   width: 100%;
   height: 100%;
}
div[id="stretch"] { 
   position: fixed; 
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
}

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 face-wink


MfG

Naderio - Thomas G.

EDIT:

Habs nochmal überarbeitet. Jetzt funktioniert es.
GermanQuestionCSSDevelopment
Hotly discussed
AlexWishaHow to set up and configure a Linux GRE tunnelAlexWisha - 3 CommentsjstrickerWIREGUARD VPN ON UDM PRO BEHIND FRITZBOX - HANDSHAKE DID NOT COMPLETEjstricker - 1 CommentDaniEnd of Support dates for Office 2016, 2019 Apps und Productivity ServersDani - 1 Comment