Frage von Kimberly6, 46

Hintergrundbild in html bzw css?

Hallo:)

Ich muss für die Schule eine eigene Homepage erstellen. Möchte anstatt eine einfache Hintergrundfarbe ein Bild als Hintergrund. Habe auch schon im Internet gesucht wie das geht, kam aber mit den Antworten nicht so gut klar, da ich nicht so viel Ahnung habe davon. Wir müssen ausserdem html und css trennen aber beides einbinden. Muss ich das Hintergrundbild in html oder in css machen? und kann mir einer vielleicht sagen wie das überhaupt geht?

Danke im Voraus

Antwort
von Attacktic, 46

das hintergrundbild ist immer css und wenn es getrennt sein muss: 

body

{background:#000 url(../images/background.png) fixed no-repeat;

background-size:100%;}

Kommentar von Kimberly6 ,

danke für die Antwort! Jedoch ist mein Hintergrund jetzt einfach nur schwarz. ich muss doch wo die Punkte sind einfach den Namen des Bildes eingeben oder?

Kommentar von Attacktic ,

ja, den pfad zum bild musst du schon selbst setzen ;-) wenn du die hintergrundfarbe ansich ändern willst musst du die drei nullen nach der # in was anderes ändern http://html-color-codes.info/webfarben_hexcodes/ ;-)

Kommentar von Attacktic ,

ach moment, du weisst garnicht wie man das html dokument in verschiedene dateien splittet? also css von html trennt?

Kommentar von Kimberly6 ,

doch das hab ich schon aber das mit dem hintergrundbild funktioniert nicht

Kommentar von Attacktic ,

mhhh okay... schick mal den gesamten code ;-)

Kommentar von Kimberly6 ,

h1{ color:blue; } h2{ color:blue; } body{ backgroundcolor:green color:white; } body{ background:#000 url(info.jpg/images/background.png) fixed no-repeat; background-size:100%; }

Kommentar von Attacktic ,

okay ^^ 1. es darf nur einen body geben... also nimm mal body{ backgroundcolor:green color:white; } raus dann bei (info.jpg/images/background.png) das /images/background.png löschen, das ist noch der alte pfad von mir... fixed und no-repeat sowie background-size:100%;  kannst du auch raus nehmen... das ist für so nen kleines stylesheet zu viel ;-) danach sollte alles gehen :P

Kommentar von Kimberly6 ,

ne der hintergrund ist einfach schwarz..

Kommentar von Attacktic ,

nochmal ein / vor info.jpg

Kommentar von Attacktic ,

body{ background:#000 url(/info.jpg)}

hoffe dein bild info.jpg liegt auch direkt im gleichen ordner wie das css ;-)

Kommentar von Kimberly6 ,

ne leider auch nicht..

Kommentar von PattuXD ,

Ok, also du musst ja die HTML und CSS Datei irgendwo gespeichert haben (vermutlich im gleichen Ordner). 

Möglichkeit 1:
h1{ color:blue; }
h2{ color:blue; }
body{ backgroundcolor:green color:white; background-image:url(/[Name der Datei, inkl. Dateiendung]) [fixed] [no-repeat]; background-size:100%; }

Dazu muss dein Bild im gleichen Ordner, wie die CSS Datei sein, oder:

Möglichkeit 2:
h1{ color:blue; } 
h2{ color:blue; } 
body{ backgroundcolor:green color:white; background-image:url([Webadresse für Bild aus dem Internet]); background-size:100%; }

Ist nicht so schön, wenn das Bild nicht dir gehört, wegen
a) Urheberrechtsbla, das sollte für Schule aber nicht so viel machen
b) Wenn das Bild gelöscht wird, wird dein Hintergrund auch gelöscht
c) funktioniert nur mit Internetverbindung
Ich empfehle also 1.
Falls du gefragt wirst, was das heißt: 
background-image:url(...); setzt das Hintergrundbild ein.
background-size:100%; skaliert es auf volle Größe des Bildschirms.
fixed und no-repeat sind optionale Attribute.
fixed sagt, dass das Hintergrundbild nicht mitscrollt und no-repeat verhindert, dass das Bild x mal hinter- und untereinandergesetzt wird, wenn es den Bildschirm nicht ausfüllt.
Das du aber eh background-size:100%; hast, glaube ich, dass das nichts bewirkt. Ich könnte mir höchstens vorstellen, dass fixed etwas bewirkt, wenn deine Website nicht auf den Bildschirm passt und du für den kompletten Inhalt dann scrollen müsstest.

Antwort
von FfEeLlIiXx, 20

http://www.html-seminar.de/css\_bilder\_und\_hintergrundbilder.htm

Auf dieser Seite wird es sehr gut erklärt.

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten