# Background Image im Header

**URL:** <https://forum.shopware.com/t/background-image-im-header/38877>\
**Category:** Themes & Design\
**Created:** [8. August 2016 um 12:55 UTC](https://forum.shopware.com/t/background-image-im-header/38877 "2016-08-08T12:55:46Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Cholo](https://avatars.discourse-cdn.com/v4/letter/c/58f4c7/32.png) [@Cholo](https://forum.shopware.com/u/Cholo)\
**Post date:** [8. August 2016 um 12:55 UTC](https://forum.shopware.com/t/background-image-im-header/38877/1 "2016-08-08T12:55:46Z")

</div>

Hi,

ich versuche verzweifelt ein Background Image im Header einzubauen. Ich habe folgende Seite als „Vorbild“ gefunden: [http://www.logikaspiele.de/](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 {  
&nbsp; height: 300px  
&nbsp; margin-bottom: 5px  
&nbsp; background-image: [www.shop.etiquetablanca.de/themes/Frontend/EBlocal/frontend/\_public/src/img/eb-header.jpg](http://www.shop.etiquetablanca.de/themes/Frontend/EBlocal/frontend/_public/src/img/eb-header.jpg)  
&nbsp; background-position: center,top;  
&nbsp; background-repeat: no-repeat,repeat;  
&nbsp; .logo-main {  
&nbsp;&nbsp;&nbsp; // Smaller logo for mobile viewports  
&nbsp;&nbsp;&nbsp; .logo–shop {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .unitize-height(35, 16);  
&nbsp;&nbsp;&nbsp; }

Es erscheint folgende Fehlermeldung:

core.ERROR: exception ‚Less\_Exception\_Chunk‘ with message ‚ParseError: Unexpected input in header.less on line 15, column 5 13|&nbsp;&nbsp;&nbsp;&nbsp; // Basic header 14| .header-main { 15|&nbsp;&nbsp;&nbsp;&nbsp; height: 300px 16|&nbsp;&nbsp;&nbsp;&nbsp; margin-bottom: 5px 17|&nbsp;&nbsp;&nbsp;&nbsp; background-image: [www.shop.etiquetablanca.de/themes/Frontend/EBlocal/frontend/\_public/src/img/eb-header.jpg](http://www.shop.etiquetablanca.de/themes/Frontend/EBlocal/frontend/_public/src/img/eb-header.jpg) 18|&nbsp;&nbsp;&nbsp;&nbsp; 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

---

<div class="post-metadata">

**Author:** ![NextMike](https://avatars.discourse-cdn.com/v4/letter/n/838e76/32.png) [@NextMike](https://forum.shopware.com/u/NextMike)\
**Post date:** [8. August 2016 um 12:58 UTC](https://forum.shopware.com/t/background-image-im-header/38877/2 "2016-08-08T12:58:11Z")

</div>

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

Hier sind die gültigen Werte:&nbsp;[http://www.w3schools.com/cssref/pr\_background-position.asp](http://www.w3schools.com/cssref/pr_background-position.asp)

---

<div class="post-metadata">

**Author:** ![Cholo](https://avatars.discourse-cdn.com/v4/letter/c/58f4c7/32.png) [@Cholo](https://forum.shopware.com/u/Cholo)\
**Post date:** [8. August 2016 um 13:11 UTC](https://forum.shopware.com/t/background-image-im-header/38877/3 "2016-08-08T13:11:08Z")

</div>

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|&nbsp;&nbsp;&nbsp;&nbsp; } 927|&nbsp; 928|&nbsp;&nbsp;&nbsp;&nbsp; .cart–display { 929|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .unitize-margin(0, 25, 0, 5, 16); 930|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-weight: bold; 931|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 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…

---

<div class="post-metadata">

**Author:** ![NextMike](https://avatars.discourse-cdn.com/v4/letter/n/838e76/32.png) [@NextMike](https://forum.shopware.com/u/NextMike)\
**Post date:** [8. August 2016 um 13:14 UTC](https://forum.shopware.com/t/background-image-im-header/38877/4 "2016-08-08T13:14:08Z")

</div>

Die Zeilen sollten mit ; enden

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

---

<div class="post-metadata">

**Author:** ![Cholo](https://avatars.discourse-cdn.com/v4/letter/c/58f4c7/32.png) [@Cholo](https://forum.shopware.com/u/Cholo)\
**Post date:** [8. August 2016 um 13:39 UTC](https://forum.shopware.com/t/background-image-im-header/38877/5 "2016-08-08T13:39:57Z")

</div>

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|&nbsp;&nbsp;&nbsp;&nbsp; } 928|&nbsp; 929|&nbsp;&nbsp;&nbsp;&nbsp; .cart–display { 930|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .unitize-margin(0, 25, 0, 5, 16); 931|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-weight: bold; 932|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color: @text-color;’

Die entsprechenden Zeilen sehen wie folgt aus:

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

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

&nbsp;

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

---

<div class="post-metadata">

**Author:** ![NextMike](https://avatars.discourse-cdn.com/v4/letter/n/838e76/32.png) [@NextMike](https://forum.shopware.com/u/NextMike)\
**Post date:** [8. August 2016 um 13:44 UTC](https://forum.shopware.com/t/background-image-im-header/38877/6 "2016-08-08T13:44:34Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Patrick\_Stahl](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/patrick_stahl/32/7679_2.png) [@Patrick\_Stahl](https://forum.shopware.com/u/Patrick_Stahl)\
**Post date:** [8. August 2016 um 13:58 UTC](https://forum.shopware.com/t/background-image-im-header/38877/7 "2016-08-08T13:58:27Z")

</div>

Hallo Cholo,

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

&nbsp;

```
...
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](https://forum.shopware.com/plugins/CKEditor/plugins/smiley/images/shopware.png "Shopware")

---

<div class="post-metadata">

**Author:** ![Cholo](https://avatars.discourse-cdn.com/v4/letter/c/58f4c7/32.png) [@Cholo](https://forum.shopware.com/u/Cholo)\
**Post date:** [8. August 2016 um 14:47 UTC](https://forum.shopware.com/t/background-image-im-header/38877/8 "2016-08-08T14:47:31Z")

</div>

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

&nbsp;
