Ein Bild als dauerhaftes Hintergrundbild

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

luvcode

Neues Mitglied
12 März 2019
2
0
1
17
Hallo,

mal kurz im Voraus, ich bin dabei mir selbst HTML anzueignen, da ich bald eine Ausbildung zum FIAE anfange u. ich mit ein bisschen vorwissen anfangen möchte. Ich habe angefangen eine "Webseite" zu programmieren und möchte ein Bild als Standard Hintergrundbild fixieren. Ich habe es über <body style="background-image: url(***)"> ...inhalt..... </body> versucht zu machen und das Bild dann mit background-attachment:fixed; zu fixieren, jedoch ist das Bild total verschwommen und das Bild kann ich weder durch width und height der Seite anzupassen. Habe es auch irgendwie mit CSS versucht, klappt irgendwie mit meinem Wissen nicht. Meine frage ist, wie kann ich das Bild so fixieren, dass ich dann es als Basic bild habe, da ich auf diesem Hintergrundbild einen Text haben möchte. Ich hoffe es ist grob verständlich. Ich selbst setze mich seit 2 Monaten mit HTML auseinander vllt. habe ich etwas übersehen und kann es deshalb nicht.

Ich bedanke mich im Voraus.

Mfg,
luvcode
 

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.017
200
63
17
Die style Attribute sind bereits Cascading Style Sheets Angaben (CSS).

<body style="background-image: url(***)"> ...inhalt..... </body> versucht zu machen und das Bild dann mit background-attachment:fixed; zu fixieren
Es eignet sich prinzipiell besser, dein CSS in ein externes File einzubinden. Ansonsten hast du hier eigentlich keinen schlechten Ansatz gewählt, zumindest könnte man das meinen. background-attachment: fixed wird aber leider auf den meisten mobile devices deaktiviert oder zumindest nicht richtig dargestellt, da es einen großen Renderaufwand erfordert.

Es ist also besser, einen fixed-Container in den Hintergrund zu setzen. Setze also den Container und positioniere ihn fixed (position: fixed;). Um ihn in den Hintergrund zu bringen, beschäftige dich mit dem z-index. Dann kannst du das Hintergrundbild setzen und entsprechend anpassen. Was die Höhe und Breite vom Bild angeht musst du dich mit background-size auseinandersetzen. Passend wäre hier z.B. background-size: cover;.
 
Reactions: luvcode

luvcode

Neues Mitglied
12 März 2019
2
0
1
17
Die style Attribute sind bereits Cascading Style Sheets Angaben (CSS).

Es eignet sich prinzipiell besser, dein CSS in ein externes File einzubinden.
Ansonsten hast du hier eigentlich keinen schlechten Ansatz gewählt, zumindest könnte man das meinen. background-attachment: fixed wird aber leider auf den meisten mobile devices deaktiviert oder zumindest nicht richtig dargestellt, da es einen großen Renderaufwand erfordert.

Danke erst mal für die Antwort, ich habe eine externes CSS File so ist es nicht. Das background-attachment: fixed habe ich tatsächlich schon eingesehen.

Es ist also besser, einen fixed-Container in den Hintergrund zu setzen. Setze also den Container und positioniere ihn fixed (position: fixed;). Um ihn in den Hintergrund zu bringen, beschäftige dich mit dem z-index. Dann kannst du das Hintergrundbild setzen und entsprechend anpassen. Was die Höhe und Breite vom Bild angeht musst du dich mit background-size auseinandersetzen. Passend wäre hier z.B. background-size: cover;.
Ich habe es schon vesucht mit dem background-size: cover; vor Ihrer Antwort auseinander gesetzt. Ich habe Ihre Antwort etwas spät gelesen, tut mir leid. Ich werde mich mal mit dem z-index beschäftigen, danke für die Information. Ich habe das Bild jetzt so positioniert wie ich's wollte, jetzt hab ich das Problem das ich nicht scrollen kann, also ist das bild Abgeschnitten und wird nicht komplett so angezeigt wies eigentlich sein sollte. Woran könnte das liegen?

Danke für die Zahlreiche Informationen und Ihre Antwort.
 
Werbung:

Latest posts