Hintergrundbild über die ganze Seite

[Karfunkel]

Hallo,

ich würde gerne im gesamten Shop ein Hintergrundbild hinterlegen.
Ich habe auch schon versucht das ganze im stylesheet.css einzubinden, was mir leider nicht gelungen ist.
Oder muss das woanders eingebunden werden?
Da ich kaum Ahnung vom CSS habe brauche ich dringend Hilfe von.

Viele Grüße
Andre

[NilsK]

Hallo Andre,

Ahnung solltest Du schon haben, sonst kann es ganz schnell schief gehen - xtc ist hier manchmal sehr zimperlich und zeigt dann nichts mehr an. ;-)

Als erstes solltest Du Dir Deine Original Stylesheet.css Datei kopieren und mit der Kopie weiterarbeiten (Original umbenennen, z.B. "_original" hinzufügen).

Dann suchst Du Dir ziemlich weit oben die "body" Deklaration und fügst folgendes ein:

background: #f6f6f6;                                       /* das ist noch original*/
 background-image: url(../img/dein-bild.jpg);  /* eingefügt BEGINN   */
 background-repeat:no-repeat;
 background-position:center center;
 background-attachment:fixed;
 background-size: cover;                                /* eingefügt ENDE     */
 color: #484848;
 font: 12px "Arial", Helvetica, sans-serif;
 

Alles, was Du änderst, solltest Du Dir direkt als /* Kommentar */ daneben schreiben, sonst blickst Du ganz schnell nicht mehr durch.

Im Firefox kannst Du mit dem Firebug im Frontend sehr schnell Änderungen anschauen/ausprobieren, die nicht gespeichert werden, aber Du kannst dann die Stelle in der entsprechenden Datei suchen.

Wenn Du was geändert hast, Cache im Backend (unter System) und ggf. den Browsercache löschen, damit es sichtbar wird (im schlimmsten Fall auch mal 5 Minuten warten).

Achte darauf, daß das Bild nicht zuviel MB hat und teste es vor allem auf verschiedenen Monitoren oder Bitte Freunde darum, denn auf einen riesen Büromonitor sollte es auch noch funktionieren. ;-)

Erfolgreiche Grüße
Nils

[Karfunkel]

Hallo Nils,

das hat soweit funktioniert, stolz....
Jedoch wollte ich das Bild über die ganze Seite, also auch im Kopf und im Fußbereich.
Hier unser Shop:

http://www.heilundkraut.de/shop/

Was muss ich dafür machen?

Viele Grüße und schon mal Danke.
André

 

[NilsK]

Hallo André,

wie gesagt, solche Sachen schaust Du Dir am besten immer erst im Firefox an, rechte Maustaste und dann "Element untersuchen" oder "Firebug" (wurde im letzten Update glaube ich umbenannt). Dort kannst Du dann Werte direkt ändern (oder am Zeilenanfang ein/ausschalten usw.) und es wird "nur für Dich" geändert angezeigt (gerade bei Farben oder Abständen ganz nützlich), dann suchst Du das in der CSS-Datei und speicherst es samt Kommentar.

Suche folgenden Abschnitt in Deiner CSS-Datei:

/* Backgrounds ..... */    <<--Überschrift

"#background-topmenu" - ist der erste kleine "Balken" oben, gefolgt von:

"#background-top" und entsprechend für den Fuß:

"#background-bottom"

Wenn Du was ausklammerst mit /* wie bei Kommentaren */ dann achte darauf, daß auch die Abstände ausgeklammert werden und sich alles verschieben kann, diese ggf. einfach stehen lassen, also nicht ausklammern.

Achte bei transparenten Bereichen peinlichst darauf, daß man alles noch lesen und anklicken kann. Alle Monitore, Tapletts usw. sind i.d.R. nicht kalibriert, heißt, jeder sieht Farbe und Helligkeit anders als Du.

Laß am besten Deine Freunde und vor allem Frauen (die haben wohl irgendwie das Händchen für Farbgestaltung angeboren ) drauf schauen und alles testen.

Sonntagsgrüße
Nils

[Karfunkel]

Hallo Nils,

es hat geklappt :-)

Danke für deine Tips

Viele Grüße
André