Background-image - Hintergrundbild in HTML bzw. CSS

[Randy]

Hallo, Forenmitglieder,

ich habe eine Frage an HTML- und CSS-fitte User. Meine Homepage läuft nicht über ein CMS - dazu reichen meine PC-Kenntnisse und mein IT-Verständnis einfach nicht aus. Es ist schon sehr lang eher, dass ich mich da tiefer beschäftigt habe.

Meine Website läuft noch über HTML und ein CSS. Ich wollte jetzt mal ein Hintergrundbild einbauen, dass nicht mitläuft, wenn man nach unten scrollt. Das Hintergrundbild soll ein Landschaftsbild sein - ungefähr 3000 bis 2000 Pixel gross - so dachte ich mir das zumindest mal aus.

Kann mir jemand sagen, wie das Einbauen funktioniert? Muss ich das auf jeder einzelnen HTML-Seite im Body machen oder irgendwas im CSS einsetzen, dass dann für alle HTML-Seiten gilt? Wenn ja, wie geht das bzw. wie lautet der Code dafür?

Über eine Rückmeldung freue ich mich.

Viele Grüße

randy

[Carmen]

Hallo,

du brauchst für das Hintergrundbild die CSS Eigenschaft " background-attachment: fixed;"

http://www.w3schools.com/cssref/pr_background-attachment.asp

[Randy]

Hallo Carmen,

Danke für den Hinweis. Ich probiere es mal aus.

Gruß randy

Hallo,

du brauchst für das Hintergrundbild die CSS Eigenschaft " background-attachment: fixed;"

http://www.w3schools.com/cssref/pr_background-attachment.asp

[Matthias Apsel]

Hallo Randy,

Meine Website läuft noch über HTML und ein CSS.

Webseiten laufen immer über HTML und CSS ;-)

Ich wollte jetzt mal ein Hintergrundbild einbauen, dass nicht mitläuft, wenn man nach unten scrollt. Das Hintergrundbild soll ein Landschaftsbild sein - ungefähr 3000 bis 2000 Pixel gross - so dachte ich mir das zumindest mal aus.

Das ist eine ganz schlechte Idee. Solch große Bilder verbraten Bandbreite ohne Ende, nur damit sie auf den meisten Endgeräten wieder skaliert werden. Kaum jemand nutzt seinen Browser in solch großen Vollbildauflösungen.

Kann mir jemand sagen, wie das Einbauen funktioniert?

Schau mal ins Wiki. HTML/Tutorials/responsive_Bilder

Bis demnächst
Matthias

[Carmen]

Hallo,

Das ist eine ganz schlechte Idee. Solch große Bilder verbraten Bandbreite ohne Ende, nur damit sie auf den meisten Endgeräten wieder skaliert werden. Kaum jemand nutzt seinen Browser in solch großen Vollbildauflösungen.

so ein großes Bild kannst du ohne Probleme mit einem Grafikprogramm wie z.B. Photoshop auf unter 100kb runter rechnen, hier reden wir absolut nicht von großen Datenmengen.

[ottogal]

HTML/Tutorials/responsive_Bilder

In der Einleitung dieses Artikels sollte jemand folgenden "Satz" überarbeiten:

Hier müssen Webdesigner eine Banace zwischen dem optimalen bild in HD-Qualität und einer benutzerfreundlichen Seite, die ihre Inhalte schnell und unkompliziert zur Verfügung stellt.

[Matthias Apsel]

Hallo ottogal,

HTML/Tutorials/responsive_Bilder In der Einleitung dieses Artikels sollte jemand folgenden "Satz" überarbeiten:

Auch du kannst ein Jemand sein.

Bis demnächst
Matthias

[ottogal]

Ok, habs mal umformuliert:

Hier müssen Webdesigner eine Balance finden zwischen dem optimalen Bild in HD-Qualität und einer benutzerfreundlichen Seite, die ihre Inhalte schnell und unkompliziert zur Verfügung stellt.

[Matthias Apsel]

Hallo ottogal,

Ok, habs mal umformuliert:

Danke. Du hättest das auch ohne Registrierung tun können. Die Tatsache, dass du dich registriert hast, lässt mich auf weitere Beiträge hoffen. ;-)

Bis demnächst
Matthias

[ottogal]

Danke. Du hättest das auch ohne Registrierung tun können.

Wusste ich nicht...

Die Tatsache, dass du dich registriert hast, lässt mich auf weitere Beiträge hoffen. ;-)

;-))

[Randy]

Hallo Matthias,

Danke für den Tipp. Viell. lasse ich das dann doch besser bleiben mit dem Backgroundbild.

Es hat eh nicht funktioniert.

Ich hatte in meiner CSS-Datei mal Folgendes eingegeben.

Aber es erscheint gar kein Hintergrundbild ;-)

body {
   margin:0;
    padding:0;
   font-family:Tahoma, sans-serif;
   font-size:13px;
   line-height: 1.5em;
   color:#333333;
   background-color:#EEEEEE;
   background-image: url(../images/DSC00451.JPG);
    background-repeat: no-repeat;
    background-attachment: fixed;
   text-align:left;
   }

Gruß randy

[Vollzitat entfernt]

[Matthias Apsel]

Hallo Randy,

Ich hatte in meiner CSS-Datei mal Folgendes eingegeben.

Aber es erscheint gar kein Hintergrundbild ;-)

Prüfe, ob der Pfad zum Bild korrekt ist. Relative Pfadangaben beziehen sich auf die CSS-Ressource, nicht auf das HTML-Dokument.

Bis demnächst
Matthias