Aktuell verwenden wir die Shopware 5.0.1. mit Responsive-Design. Nun möchte ich das Hintergrundbild ändern bzw. ersetzen – komplett im Hintergrund, hinter dem weißen Contentbereich. Im optimalsten Fall kann ich noch die Hintergrundfarbe auf schwarz ändern. Probiert hab ich das schon mal – nur leider ohne Reaktion in der Programmierung. Hier habe ich das Bild eingebaut: \html\Responsive\frontend_public\src\less_modules\global.less background-image: url("…/…/img/comets.jpg"); background-repeat: repeat-x; Und hier liegt das Bild ab: /html/themes/Frontend/Responsive/frontend/_public/src/img Kann mir jemand sagen, wo ich was eintragen muss bzw. wo ich was ablegen muss, dass das funktioniert?!
Hi, den Hintergrund kann man mit dieser CSS-Regel ändern:
.page-wrap {
background-image: url("/media/image/mein-image.jpg");
background-position: center 100px;
}
Einfach in deine Less packen oder in der Theme-Konfiguartion als “Weitere CSS-Dateien” hinterlegen. Heiner
Welche CSS-Datei muss ich anpassen?
Hi, das SW5-Template hat keine CSS nur LESS-Dateien. Die Doku zum Anpassen der Less-Dateien findest du hier: https://devdocs.shopware.com/designers-guide/less/ Alternativ kannst du es in der Theme-Konfiguartion als „Weitere CSS-Dateien“ hinterlegen. Heiner
Bei mir klappt das leider auch nicht. In welche Less Datei soll es eingefügt werden? All.less? Er nimmt es bei mir partout nicht an 
Jemand eine Idee dazu?
[quote=“futonwerkstatt”]Bei mir klappt das leider auch nicht. In welche Less Datei soll es eingefügt werden? All.less? Er nimmt es bei mir partout nicht an Jemand eine Idee dazu?[/quote] Moin, ich habe das bei mir in meiner custom.css wie folgt gemacht. Dabei ist zu beachten, dass wenn bspw. auf der Startseite eine Einkaufswelt über die gesamte Seite angezeigt wird, dann diese sich über das Backgroundbild legen würde und somit die Zwischenräume einfach nur wieder Weiß wären. Mit nun folgendem Code, wird das Backgroundbild nun auch bei der Fullscreen Einkaufswelt angezeigt: /\* Hintergrundbild wenn Einkaufswelt auf Fullscreen\*/ .content-main.is--fullscreen { box-shadow: none; margin: 0; max-width: none; padding: 0; background-attachment: fixed; background-color: transparent; background-image: url("URL ZU DEINEM BILD"); background-origin: padding-box;hr.line {color: #72a425;background-color: #72a425; border-color: #72a425} background-position: top;hr.smallline {background-color:#c7c7c7} background-repeat: repeat; width: 100%;} Und hier der Code für alle anderen Seiten außer der Startsteite. Somit könnte man nun auch auf der Startseite einen anderen Background, als wie auf den Kategorieseiten etc. anzeigen lassen. /\* Hintergrundbild \*/ html { background-attachment: fixed; background-color: transparent; background-image: url("URL ZU DEINEM BILD"); background-origin: padding-box;hr.line {color: #72a425;background-color: #72a425; border-color: #72a425} background-position: top;hr.smallline {background-color:#c7c7c7} background-repeat: repeat; width: 100%;} Die Codes sind jetzt so konfiguriert dass das Bild wiederholt wird, aber fixed ist. Sieht einfach besser aus, als wenn es mitscrollen würde, finde ich, wirkt dann alles ruhiger und der Blick ist mehr auf die Artikel gerichtet. Kommt aber evtl. auch darauf an was man als Hintergrund verwendet. Ich habe da jetzt z.B. ein ganz kleines Noise Bild von gerade einmal 100px hinterlegt was um die 3kb Groß ist. Dazu kann ich folgenden Generator empfehlen: Klick Oder wer gerne etwas mehr möchte, color, pattern, etc. folgende Seite: Klick Gruß
1 „Gefällt mir“
Danke. ich glaube er erkennt meine Links nicht an. Ich habe das Bild im Ordner _public/src/img, die Css datei ist im _public/src/css. url("…/_public/src/img/background-image.jpg") Ich seh da kein Fehler…?!
[quote=„futonwerkstatt“]Danke. ich glaube er erkennt meine Links nicht an. Ich habe das Bild im Ordner _public/src/img, die Css datei ist im _public/src/css. url("…/_public/src/img/background-image.jpg") Ich seh da kein Fehler…?![/quote] Keine Ahnung. Ich habe mein Bild einfach im Media Manager hochgeladen. Ist auch einfacher zu verwalten dort. Solltest Du evtl. auch machen. url("…/media/image/Dein Bild.jpg");
[quote=“trixx”][quote=“futonwerkstatt”]Danke. ich glaube er erkennt meine Links nicht an. Ich habe das Bild im Ordner _public/src/img, die Css datei ist im _public/src/css. url("…/_public/src/img/background-image.jpg") Ich seh da kein Fehler…?![/quote] Keine Ahnung. Ich habe mein Bild einfach im Media Manager hochgeladen. Ist auch einfacher zu verwalten dort. Solltest Du evtl. auch machen. url("…/media/image/Dein Bild.jpg");[/quote] Danke. hab ich jetzt. Aber er kompiliert extrem lange - und reinladen tut er es auch nicht. Irgendwo muss ein Fehler sein. Die CSS Datei habe ich im Theme.php eingebunden mit: protected $css = array( ‘src/css/futon.css’ ); Was anderes gabs da eigentlich nicht zu beachten oder? 
1 „Gefällt mir“
[quote=„trixx“][quote=„futonwerkstatt“]Danke. hab ich jetzt. Aber er kompiliert extrem lange - und reinladen tut er es auch nicht. Irgendwo muss ein Fehler sein. Die CSS Datei habe ich im Theme.php eingebunden mit: protected $css = array( ‚src/css/futon.css‘ ); Was anderes gabs da eigentlich nicht zu beachten oder? :([/quote] Ne sieht korrekt aus, habe ich auch so eingebunden. Und deine css hattets ja gesagt liegt auch unter : themes/Frontend/DEIN THEME/frontend/\_public/src/css/futon.css Kompiliert er denn zu Ende oder kommt ne Fehlermeldung? Wenn er zu Ende kompiliert sollte eigentlich auch alles stimmen. Probier mal den absoluten Bild-Pfad zu hinterlegen. Habe ich bei mir auch. Habe gerade nochmal geguckt. Weiß es nicht mehr zu 100% aber glaube ich hatte da Anfangs auch Probleme und hatte dann einfach den absoluten Pfad hinterlegt, also: background-image: url("https://www.DeineUrl.de/media/image/DeinBild.jpg");[/quote] ja genau so ist das eingebunden. Er kompiliert schon seit ner Stunde. Aber ich weiß nicht, ob er sich währenddessen aufgehangen hat oder nicht. Dauert das immer so lange? Bei Einstellungen sind nur CSS Source Map und CSS files angeklickt. Habe kein JS zusätzlich eingebaut.
Habe bei mir auch nur die unteren 3 Haken in den Einstellungen drin. Ab css source map bis JavaScript komprimieren. Nein, das kompilieren geht immer ruck zuck, paar Sekunden. Das deutet dann eher darauf hin dass etwas nicht richtig eingebunden wurde. Evtl. nochmal alles von vorne Schritt für Schritt machen irgendwo ist da der Wurm drin, beim Einbiden oder im Code.