Grafik in Template einbinden

[sportfood24.ch]

Hallo Zusammen

Kann mir vielleicht jemand helfen eine Grafik in das Template einzubinden?

MffG

[Randshoprookie]

Hallöchen,

wo soll die Grafik denn hin?

LG Piet

[sportfood24.ch]

Hallo, ich würde gerne die Bergkette so wie in dem Bild im Anhang einfügen und alles was darunter ist in der gleichen Hintergrundfarbe haben.

[Martens]

Hallo,

in der layout.css kannst Du den body entsprechend anpassen und erweitern. Das Bild mit der Bergkette (hier im Beispiel "bergkette.jpg" muss vorher in den images-Ordner, der sich neben dem CSS-Ordner befindet.

Code: Alles auswählen

body {
   …
   padding: 0 0 100px;
   background: #fff url(../images/bergkette.jpg) no-repeat center bottom;
   background-size: cover;
   …
}

padding: damit kannst Du das Bild nach unten verschieben (Beispiel 100px)
background: ist ersichtlich, denke ich
background-size: cover; sorgt dafür, dass sich das Bild der Fenstergröße anpasst. Das kann man aber auch weglassen, wenn es nicht gefällt. Einfach mal probieren.

Grüße
Martin

[sportfood24.ch]

Hallo Zusammen

Den Hintergrund habe ich jetzt rein bekommen.

Nun habe ich aber noch 2 Punkte:

1. Wie kann ich das Bild soweit runter schieben, dass die Berggipfel unter nicht mehr verdeckt sind?

2. Wie kann ich machen, dass die Grafik immer am untersten ende angesetzt ist?

Gruss

[Martens]

Hallo,

erhöhe einfach das untere Padding (also mehr als die 100px aus meinem Beispiel). Dann rutscht die Bergkette weiter runter.
Alles weitere ist schwierig zu sagen, ohne den Code zu kennen. Ist die Seite schon irgendwo online, sodass ich mal einen Blick drauf werfen kann?

Grüße
Martin

[sportfood24.ch]

Hallo

Ja die Seite ist Online, einfach ohne Inhalte: http://www.lixx-cyclingwear.ch

Das mit dem Padding macht bei mir keinen unterschied ob ich 100 px oder 2000 px eingebe?!

Gruss

[Martens]

Hallo,

Du musst im Stylesheet layout.css in der Definition für footer den Wert von margin-bottom erhöhen. Falls die Bergkette nicht all zu weit nach unten soll (85px passt ganz gut) und je nach Fensterbreite der Gipfel den Copyright-Text unlesbar macht, kannst zu diesen z.B. mit einem weißen Schatten hinterlegen. Dazu muss in der Klasse span.copy noch die Zeile

Code: Alles auswählen

text-shadow: #fff 1px 1px 1px;

ergänzt werden.

Grüße
Martin

Bildschirmfoto 2015-06-30 um 11.30.52.png (113.97 KiB) 10089-mal betrachtet