Background Image im Header

Shopware 5 Themes & Design
1

Hi,

ich versuche verzweifelt ein Background Image im Header einzubauen. Ich habe folgende Seite als „Vorbild“ gefunden: http://www.logikaspiele.de/. Nun habe ich versucht meinen Code in der Header.less Datei nach dem Vorbild anzupassen. Leider ohne Erfolg. Folgenden Code habe ich einfach in die Header.less Datei eingefügt:

.header-main {
  height: 300px
  margin-bottom: 5px
  background-image: www.shop.etiquetablanca.de/themes/Frontend/EBlocal/frontend/_public/src/img/eb-header.jpg
  background-position: center,top;
  background-repeat: no-repeat,repeat;
  .logo-main {
    // Smaller logo for mobile viewports
    .logo–shop {
      .unitize-height(35, 16);
    }

Es erscheint folgende Fehlermeldung:

core.ERROR: exception ‚Less_Exception_Chunk‘ with message ‚ParseError: Unexpected input in header.less on line 15, column 5 13|     // Basic header 14| .header-main { 15|     height: 300px 16|     margin-bottom: 5px 17|     background-image: www.shop.etiquetablanca.de/themes/Frontend/EBlocal/frontend/_public/src/img/eb-header.jpg 18|     background-position: center,top;‘

Hat jemand eine Idee was ich falsch gemacht habe? Wie kann man das Background Image ändern?

Vielen Dank im Voraus und liebe Grüße

2

  background-position: center,top; dürfte das Problem sein

Hier sind die gültigen Werte: http://www.w3schools.com/cssref/pr_background-position.asp

3

Danke für die schnelle Antwort. Ich habe Background-position gelöscht. Nun erscheint folgende Fehlermeldung: core.ERROR: exception ‘Less_Exception_Chunk’ with message ‘ParseError: missing closing } in header.less on line 928, column 20 926|     } 927|  928|     .cart–display { 929|         .unitize-margin(0, 25, 0, 5, 16); 930|         font-weight: bold; 931|         color: @text-color;’

Es fehlt also anscheinend eine Klammer? an der Stelle hatte ich aber nichts verändert. Die Zeile sieht auch nicht anders aus als die anderen, also eigentlich keine zu erkennende fehlende Klammer…

4

Die Zeilen sollten mit ; enden

Auch machst du 3  { auf nur ein Mal zu. Es sei denn das Snippet ist nicht komplett.

5

Sry aber das verstehe ich nicht. Die zeile hat doch auch vorher mit einem “;” geendet?

Nun erscheint folgende Fehlermeldung: core.ERROR: exception ‘Less_Exception_Chunk’ with message ‘ParseError: missing closing } in header.less on line 929, column 20 927|     } 928|  929|     .cart–display { 930|         .unitize-margin(0, 25, 0, 5, 16); 931|         font-weight: bold; 932|         color: @text-color;’

Die entsprechenden Zeilen sehen wie folgt aus:

924    .navigation–entry:last-child {
925            padding-right: 0;
926        }
927    }

929    .cart–display {
930        .unitize-margin(0, 25, 0, 5, 16);
931        font-weight: bold;
932        color: @text-color;
933    }
934}

 

Wo genau fehlt da denn jetzt eine “}”? Ich hab schon versucht,  in Zeile 933 eine neue Zeile einzufügen und die gleiche Klammer wie in Zeile 926 zu nutzen. Hat aber auch nicht funktioniert…

6

Checke bitte, dass jede Anweisung mit “;” endet und dass du genauso viele } hast wie {

1 „Gefällt mir“
7

Hallo Cholo,

um deine Bild-URL gehört noch ein „url()“.
D.h.:

 

...
background-image: url("http://www.shop.etiquetablanca.de/themes/Frontend/EBlocal/frontend/_public/src/img/eb-header.jpg ");
...

Generell scheint sich da aber einiges in deiner .less-Datei zerschossen zu haben.

Wenn du magst, kannst du die gesamte Datei einmal in ein ZIP-Archiv packen und irgendwo hochladen, sodass du mir einen Link zukommen lassen kannst - dann schaue ich mir das gerne mal an.

Gruß,
Patrick Shopware

1 „Gefällt mir“
8

Hi Patrick,

vielen Dank für deine Antwort. Ich hatte da tatsächlich einiges in der Less Datei durcheinander gebracht. Nun passt aber wieder alles. Die URL hatte ich nachträglich schon eingefügt. Merkwürdigerweise erscheint das Bild leider nicht. Lediglich eine weiße Fläche ist zu sehen. Woran kann das liegen?

Nochmals danke