HTML Hintergrundbild auf Fenstergröße anpassen

Hallo zusammen,

Ich habe versucht einen Homepage zu machen und habe ein schönes Bild für den Hintergrund gefunden und eingesetzt. Aber das Originalbild ist viel zu klein und deshalb wird es mehrmals angezeigt.

Ich habe im Editor geschrieben:
<html>
<head><title>Homepage</title></head>
<body background="1.jpg">
.....
</body>
</html>

Jetzt meine Frage. Wie kann ich meinen Hintergrundbild auf die Fenstergröße des Browsers gleichsetzen / anpassen? Kann man das vielleicht doch nicht und muss ich meinen Hintergrundbild dann auf einer anderen Weise vergrößern?

Tachchen!
Ich denke, dass müsste mit CSS funktionieren. Diesen Code musst du in den Head-Tag einfügen (das ist der Bereich zwischen <head> und </head>.

Code: Alles auswählen: <style type="text/css">  </style>

Die Bild-Url muss durch eine Url zu deinem Background Bild gesetzt werden. Sonst kannst du noch versuchen, dass Bild auf die Größe einer normalen Website zu vergrößern (1024x768px).

Sag bitte, ob es geklappt hat. Euer Big-D.

Big-D.s Vorschlag wird das Bild lediglich einzeln in der Mitte zentriert anzeigen und nicht mehr gekachelt darstellen. Vergrößert wird es dadurch nicht. Mir wäre auch weder im HTML noch im CSS ein Befehl dafür bekannt, man könnte es höchstens durch die Weitenregulierung probieren. Dabei läufst du allerdings Gefahr, dass das Bild verzerrt wird und die ursprünglichen Proportionen eben nicht mehr beibehalten werden, was sogar sehr wahrscheinlich ist, eben je nach Monitorauflösung und Fenstergröße beim Betrachter (und nicht bei dir!).

Deswegen würde ich dir empfehlen, ein großes Bild (Minimum 1024x768px, lieber eine Stufe höher!) zu wählen, und wenn es größer ist solltest du auf jeden Fall darauf achten, dass bei den (wenigen) kleiner eingestellten Monitoren etwas abgeschnitten wird - es sollte trotzdem noch einigermaßen ansehnlich sein.

@ Big-D
Ich habe diesen Befehl ausprobiert und wie Taline schon geschrieben hat, wird das Bild durch dieser Befehl zentriert und nicht wiederholt gezeigt. Aber es war mir trotzdem hilfreich gewesen, da ich nun keine Probleme mehr habe das Bild genau in die Mitte anzeigen zu lassen. Aber gibt es keinen Befehl dafür in HTML, denn ich habe keine Ahnung von CSS.

@ Taline
Gut, ich werde wohl entweder ein anderes Hintergrundbild suchen mit der richtigen Bildgröße oder mein jetziges ein bisschen vergrößern und verzerren.

Noch eine Frage zu dem Code von Big-D: Nachdem ich den Code in den Head Bereich geschrieben habe, habe ich bei Body geschrieben: <body bgcolor="#00FFFF">, aber die Hintergrundfarbe wurde nicht angezeigt. Das Bild ist nun in der Mitte, aber der Bereich um das Bild ist weiß.

GuiTeddy hat geschrieben:Noch eine Frage zu dem Code von Big-D: Nachdem ich den Code in den Head Bereich geschrieben habe, habe ich bei Body geschrieben: <body bgcolor="#00FFFF">, aber die Hintergrundfarbe wurde nicht angezeigt. Das Bild ist nun in der Mitte, aber der Bereich um das Bild ist weiß.

Tachchen!
Zu deinem Code: Ich kann da momentan keine unregelmäßigkeit entdecken. Hast du den Body Tag an der richtigen Position und auch richtig abgeschlossen (</body>)?

Aber es kann eigentlich nicht funktionieren, da du schon fest das Bild als Background-Bild festlegst. Somit kann man das so nicht kombinieren. Denn das "bg" steht ja für Background, und den Code kann man nicht zweimal ausführen in einem HTML Code.

Euer Big-D.

Man Big-D., kannst du nicht einfach mal nix sagen wenn du nix weißt?! Natürlich lassen sich Hintergrundbild und eine Farbe kombinieren!

Warum der eigentlich richtig geschrieben Teil im Body nicht umgesetzt wird kann ich so auch nicht erklären, aber wenn du sowieso schon den CSS-Teil drin hast kannst du diesen einfach mal entsprechend abändern:

Code: Alles auswählen: body {background: #00FFFF url(Bild-Url) no-repeat center center fixed; }

sollte dazu bereits ausreichen.

Hallo,

ich habe den Code eingeführt und es hat geklappt. Ein herzliches Dank schon mal dafür. Jetzt habe ich mein Bild genau in der Mitte und um ihn herum die Farbe.

Zu dem Code eine Frage:
body {background: #00FFFF url(Bild-Url) no-repeat center center fixed; }
Der Hintergrund wird zuerst definiert mit Hintergrundfarbe, dann das Bild, das sich nicht wiederholt und in der Mitte fixiert ist. Wozu ist das zweite "center" Wort? Ich habe das zweite "center" gelöscht, um zu sehen, was sich geändert hat. Aber irgendwie kam da keine Veränderung.

Darf ich noch eine dumme Frage stellen? Gibt es einen Unterschied zwischen HTML und CSS, weil ich das Gefühl habe, dass viele eher CSS können oder benutzen als HTML.

Unterschied in diesem Sinne gibt es nicht wirklich, da es zwei paar Schuhe sind, also kann man sie nicht wirklich miteinander vergleichen. Ich erspare mir jetzt die weitgehende Erklärung. Damit du dich aber kurz einlesen kannst, habe ich dir aber zwei Links rausgesucht, dort sollte es verständlich formuliert sein:
Link 1
Link 2

HTML Hintergrundbild auf Fenstergröße anpassen

Ähnliche Themen

Weitere interessante Themen

Neue aber noch unbeantwortete Themen