HTML Frage: Background-Image in die Bildschirmmitte
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
angezeigten feldes
befinden
bild
code
erstellen
funktionieren
hintergrundbild
hintergrundfarbe
horizontaler ausrichtung
http
image
index
mitte
position
strecke
tag
teil
url
vertikaler richtung
wiederholung
-
Hallo Community!
Da ich noch sehr am Anfang meiner HTML-Karriere bin stoße ich schon direkt an ein Problem, während ich mie erste Zeitvertriebs-Seite erstelle :)
Ich möchte eine simple Seite tag/erstellen">erstellen, bei der ein Bild als Hintergrundbild ohne Wiederholungen angezeigt werden, allerdings soll sich dieses Bild in der Mitte des vom Browsers angezeigten Feldes befinden.
Bis jetzt sieht das so aus:
<style type="text/css"> #hallo { background-image:url(hallo.jpg); background-repeat:no-repeat; background-position:center; background-color:black; height: 800px; } </style> </head><body>
das Bild befindet sich in horizontaler ausrichtung also bereits zentral. In vertikaler RIchtung ist es auch zentral, jedoch nur innerhalb der von mir eingegrenzten Höhe. Was kann ich bei dem Teil "height:800px" verändern, sodass es das ganze Browserfenster ausfüllt, und nicht nur 800px? -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
trueweb schrieb:
vaoh schrieb:
sich dieses Bild in der Mitte des vom Browsers angezeigten Feldes befinden.
background-position:center, center;
Dadurch ist das Background-Image horizontal und vertikal in der Mitte.
Ein Hintergrundbild zu strecken ist nicht möglich.
Mit
kommt bei mir nur so etwas: http://vaoh.lima-city.de/1.htmlbackground-position:center, center;
Vorher sah es so aus http://vaoh.lima-city.de/2.html
Beitrag zuletzt geändert: 27.12.2010 14:15:45 von vaoh -
Hallo,
wenn das Hallo-Div der Hintergrund sein soll, versuch doch einfach mal, die Breite und Höhe auf 100% statt auf einen absoluten Wert zu setzen, damit das Fenster von der Hintergrundfarbe gefüllt wird. Dann sollte auch Truewebs Ergänzung deines Quelltexts für das Bild funktionieren.
@Trueweb
Ein Hintergrundbild zu strecken ist nicht möglich.
Doch das geht grundsätzlich schon, indem man im CSS ein Background-Div anlegt und im HTML dem img-Tag dieses Div zuweist. Hier der Quelltext:
CSS:
#background {position:absolute; z-index:1; width:100%; height:100%;}
HTML:
<div><img id="background" src="images/test_sw.jpg" alt="" title="" /></div>
Dadurch passt sich das Bild der Fenstergröße an. Hab das selber mal ausprobiert, ob das jetzt immer gut aussieht, wenn das Bild extrem gestreckt oder gestaucht wird, sei mal dahingestellt...
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
