100% Hintergrund
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anwenden
bild
browser
code
dank
hintergrund
http
layout
obersten linken ecke
position
test
trick
untersten linken ecke
url
welt
-
Ich schaffe es einfach nicht mit width="100%" und height="100%" ein Hintergrund bild auf 100% zu skalieren...
Habt ihr Lösungen?
Bitte helft mir...
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Doch. Im IE gibts da nen Trick, der aber wiederrum auch nur im IE funktioniert. Mit CSS3 funktioniert das auch in allen anderen Browsern.
Guckst du:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Hallo Welt</title> <style type="text/css"> html, body {width:100%; height:100%; padding:0; margin:0; background:#fff;} html {overflow:hidden;} body { font-family:verdana, arial, sans-serif; font-size:12px; color: #fff; background-image: url(hintergrund.jpg); background-repeat:no-repeat; background-position:center center; background-attachment:fixed; -o-background-size: 100% 100%, auto; -moz-background-size: 100% 100%, auto; -webkit-background-size: 100% 100%, auto; background-size: 100% 100%, auto; } </style> </head> <body> Dies ist ein Test! </body> </html>
Viel Spaß ;)
Beitrag zuletzt geändert: 28.5.2011 15:33:51 von fabo -
oder einfach
#background { position: absolute; top: 0px; left: 0px; width: 100% height: 100%; }
Dann fängt er in der obersten linken ecke auch wirklich an, und geht bis zur untersten linken ecke. -
fabo schrieb:
Doch. Im IE gibts da nen Trick, der aber wiederrum auch nur im IE funktioniert. Mit CSS3 funktioniert das auch in allen anderen Browsern.
Guckst du:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Hallo Welt</title> <style type="text/css"> html, body {width:100%; height:100%; padding:0; margin:0; background:#fff;} html {overflow:hidden;} body { font-family:verdana, arial, sans-serif; font-size:12px; color: #fff; background-image: url(hintergrund.jpg); background-repeat:no-repeat; background-position:center center; background-attachment:fixed; -o-background-size: 100% 100%, auto; -moz-background-size: 100% 100%, auto; -webkit-background-size: 100% 100%, auto; background-size: 100% 100%, auto; } </style> </head> <body> Dies ist ein Test! </body> </html>
Viel Spaß ;)
Ich danke dir für diesen Code. Den habe ich gesucht. -
oder einfach diesen Trick anwenden:
http://www.cssplay.co.uk/layouts/background.html
Funktioniert in jedem Browser -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
