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

Ein Bild als dauerhaftes Hintergrundbild

L

luvcode

Neues Mitglied
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
 
Werbung:
luvcode schrieb:
Habe es auch irgendwie mit CSS versucht
Zum Vergrößern anklicken....
Die style Attribute sind bereits Cascading Style Sheets Angaben (CSS).

luvcode schrieb:
<body style="background-image: url(***)"> ...inhalt..... </body> versucht zu machen und das Bild dann mit background-attachment:fixed; zu fixieren
Zum Vergrößern anklicken....
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.

Can I use... Support tables for HTML5, CSS3, etc

caniuse.com caniuse.com

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;.
 
Aaron3219 schrieb:
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.

Can I use... Support tables for HTML5, CSS3, etc

caniuse.com caniuse.com

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.

Aaron3219 schrieb:
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;.
Zum Vergrößern anklicken....

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.
Zum Vergrößern anklicken....
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben