Foto als Hintergrund (body) einbinden in tpl_modified_responsive

[marketeer]

Liebe Gemeinde
Konnte problemlos meinen dritten 2-sprachigen Shop (D/F) installieren, läuft soweit prima.
Möchte nun das erste Mal versuchen, ein Foto als Hintergrund einzubinden. Wegen ungenügenden Kenntnissen gelingt mir dies nicht mit den hier gefundenen Beispielen. Nehme an, dass dies in der stylesheet.css erfolgen soll bei "body"(?). Sieht bei mir so aus:

Code: CSS  [Auswählen]

body {
  position: relative;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size:13px;
  background-color:#E0EEEE;
  color:#000000;
  line-height:21px;
}

Die Frage ist also, wo genau der Bild-Link eingebaut werden muss.
Mein Hintergrundbild (habs mal versuchsweise 2000x2000px gemacht) ist hier gelagert:
public_html/meinshop.ch/templates/tpl_modified_responsive/img/hintergrundbild.png

Danke für jede Hilfe!
Gruss  Walter

[EDIT Tomcraft 24.06.2022: Code formatiert mit "CSS-Code-Button".]

Linkback: https://www.modified-shop.org/forum/index.php?topic=42418.0

[hpzeller]

Hallo Walter,

also das Hintergrundbild ist mit 2000 x 2000 Pixel für grosse Bildschirme zu klein, es wird bei grossen Monitoren aufgeblasen und wirkt deshalb unscharf.

So kannst du dein Vorhaben umsetzen:
Füge in der Datei templates/tpl_modified_responsive/stylesheet.css nach folgendem Regelsatz

Code: CSS  [Auswählen]

body {
  position: relative;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size:13px;
  background-color:#fff;
  color:#555;
  line-height:21px;
}

diese Regeln ein. Damit wird das Hintergrundbild eingebunden.

Code: CSS  [Auswählen]

/* Bei Screens kleiner als 1140px macht das Laden des Hintergrundbildes keinen Sinn. */
@media only screen and (min-width: 1140px) {
  body {
    background: #fff url(img/hintergrundbild.png) center center / cover no-repeat fixed;
  }
}

Jetzt wirst du sehen, dass einige Teile des Shops transparent geworden sind, viele Texte kann man dadurch kaum noch lesen, ersetze deshalb folgenden Regelsatz

Code: CSS  [Auswählen]

#layout_content {
  width:100%;
  max-width:1140px;
  padding: 0px 10px;
  min-height:600px;
  margin: 0px auto;
  box-sizing: border-box;
}

mit diesem

Code: CSS  [Auswählen]

#layout_content {
  width: 100%;
  max-width: 1140px;
  padding: 0px 10px 50px 10px;
  min-height: 600px;
  margin: 0px auto;
  box-sizing: border-box;
  background-color: #fff;
}

und folgenden Regelsatz

Code: CSS  [Auswählen]

#layout_footer {
  background: #363839;
  min-height:280px;
  margin: 40px 0 0 0;  
  padding: 0 0 20px 0;
}

mit diesem.

Code: CSS  [Auswählen]

#layout_footer {
  background: #363839;
  min-height:280px;  
  padding: 0 0 20px 0;
}

Gruss
Hanspeter

[marketeer]

Hallo Hanspeter
Vorerst einfach mal vielen Dank für die sehr schnelle und detaillierte Antwort!
Ich werde dies gleich mal ausprobieren. und dann Rückmeldung geben
Das Foto kann ich neu machen mit der entsprechenden Auflösung (danke für den Hinweis).
Gruss Walter

[marketeer]

Hallo Hanspeter
Das hat ohne wenn und aber geklappt.
Das Testfoto habe ich mal auf 3440x1440 skaliert, das ist soweit gut, nur am Foto-Motiv muss ich noch arbeiten, bis ich die gewünschte Wirkung habe.
Ich sage herzlichen Dank und hoffe, dass ich wieder für lange Zeit alleine zurecht komme.
Gruss Walter