# Hintergrundbild

**URL:** <https://forum.shopware.com/t/hintergrundbild/38966>\
**Category:** Themes & Design\
**Created:** [11. August 2016 um 05:31 UTC](https://forum.shopware.com/t/hintergrundbild/38966 "2016-08-11T05:31:37Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![aemarcel](https://avatars.discourse-cdn.com/v4/letter/a/958977/32.png) [@aemarcel](https://forum.shopware.com/u/aemarcel)\
**Post date:** [11. August 2016 um 05:31 UTC](https://forum.shopware.com/t/hintergrundbild/38966/1 "2016-08-11T05:31:37Z")

</div>

Hallo.

&nbsp;

Ich möchte ein festes Hintergrundbild einstellen, dass ständig angezeigt wird (ich weiß, wird überlappt… aber man sieht es ja trotzdem ab und an). Finde aber die entsprechende css nicht. Vermute ist irgendwo im themes ordner, kann aber wie gesagt die zuständige CSS nicht finden. Kann mir die jemand nennen bzw. den Pfad. Hab ein eigens Theme, müsste es ja dann da auch rein kopieren (die geänderte Datei aus dem responsive Theme).

&nbsp;

Gruß

&nbsp;

Marcel

---

<div class="post-metadata">

**Author:** ![steinsoftware](https://avatars.discourse-cdn.com/v4/letter/s/b487fb/32.png) [@steinsoftware](https://forum.shopware.com/u/steinsoftware)\
**Post date:** [11. August 2016 um 06:30 UTC](https://forum.shopware.com/t/hintergrundbild/38966/2 "2016-08-11T06:30:54Z")

</div>

Dazu musst du ein eigenes Theme im Theme-Manager erstellen und dann geht es hier weiter mit Anleitungen:

[https://developers.shopware.com/designers-guide/](https://developers.shopware.com/designers-guide/)

---

<div class="post-metadata">

**Author:** ![aemarcel](https://avatars.discourse-cdn.com/v4/letter/a/958977/32.png) [@aemarcel](https://forum.shopware.com/u/aemarcel)\
**Post date:** [14. August 2016 um 19:42 UTC](https://forum.shopware.com/t/hintergrundbild/38966/3 "2016-08-14T19:42:35Z")

</div>

Hallo.

Habe ich gemacht. Hab die Datei all.less (in meinem Theme-Ordner) erstellt und dann die die Datei main-navigation.less (ebenfalls erstellt) aus meinem Theme Order \_modules importiert. Die Datei main-navigation.less enthält nur die Änderungen, die ich machen möchte, habe also nicht die gesamte Datei kopiert. Beim kompilieren hängt er sich jetzt auf. Die Fehlermeldung aus der Konsole:

&nbsp;

## Ups! Ein Fehler ist aufgetreten!

Die nachfolgenden Hinweise sollten Ihnen weiterhelfen.

### properties must be inside selector blocks, they cannot be in the root. Index 0 Filename: C:/xampp/htdocs/home/shop/themes/Frontend/LauraMarie/frontend/\_public/src/less/\_modules/main-navigation.less in vendor\oyejorge\less.php\lib\Less\Visitor\toCSS.php on line 92

### Stack trace:

```
#0 vendor\oyejorge\less.php\lib\Less\Visitor\toCSS.php(102): Less\_Visitor\_toCSS-\>checkPropertiesInRoot(Object(Less\_Tree\_Ruleset)) #1 vendor\oyejorge\less.php\lib\Le.. 

&nbsp;

Gruß
```

---

<div class="post-metadata">

**Author:** ![useg](https://avatars.discourse-cdn.com/v4/letter/u/df705f/32.png) [@useg](https://forum.shopware.com/u/useg)\
**Post date:** [14. August 2016 um 19:56 UTC](https://forum.shopware.com/t/hintergrundbild/38966/4 "2016-08-14T19:56:19Z")

</div>

Wie sieht deine all.less aus und was hast du in deiner&nbsp;/\_modules/main-navigation.less drin, irgendwo ist da ein Fehler.

Uwe

---

<div class="post-metadata">

**Author:** ![elektro-hausmann](https://avatars.discourse-cdn.com/v4/letter/e/58f4c7/32.png) [@elektro-hausmann](https://forum.shopware.com/u/elektro-hausmann)\
**Post date:** [15. August 2016 um 13:28 UTC](https://forum.shopware.com/t/hintergrundbild/38966/5 "2016-08-15T13:28:35Z")

</div>

Also ich habe das wie folgt gelöst.

In Themes/Allgemein/Grundgerüst und dann unter @body-bg

```
url("http://deinen-shop.de/deinbild.jpg";)fixed

```

&nbsp;

---

<div class="post-metadata">

**Author:** ![aemarcel](https://avatars.discourse-cdn.com/v4/letter/a/958977/32.png) [@aemarcel](https://forum.shopware.com/u/aemarcel)\
**Post date:** [15. August 2016 um 20:20 UTC](https://forum.shopware.com/t/hintergrundbild/38966/6 "2016-08-15T20:20:44Z")

</div>

Hallo.

&nbsp;

Hier die all.less:

# /\* All.less

The `all.less` file imports all style components that will display on the page.

It includes the plugins `normalize` and `pocketgrid`, the open-sans fontface and the specific less files.  
\*/

@import „…/…/vendors/less/normalize-less/normalize“;  
@import „…/…/vendors/less/pocketgrid/pocketgrid.less“;  
@import „\_components/fonts“;  
@import „variables“;  
@import „mixins“;  
@import „components“;  
@import „modules“;@import „\_modules/main-navigation“;  
@import „hacks“;  
@import „ie“;

die main-navigation:

# /\* Main navigation

Contains the styles of the main navigation of the Shopware storefront.

The main navigation is positioned above the content section.

It contains the viewport specific styles inside media queries.  
\*/

.navigation-main {  
&nbsp;&nbsp; &nbsp;background-image:url(favicon\_ret.jpg); background: #fff;  
&nbsp;&nbsp;&nbsp; display: none;  
}

@media screen and (min-width: @tabletViewportWidth) {  
&nbsp;&nbsp; &nbsp;.navigation-main {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border-bottom: 1px solid @brand-primary;  
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;display: block;  
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;position: relative;

&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;.navigation–list {  
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;.clearfix();  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .unitize-padding(0, 10);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin: 0;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; position: relative;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; white-space: nowrap;  
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}

&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;.navigation–entry {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; display: inline-block;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -ms-touch-action: none;  
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}

&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;.navigation–link {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .transition(none 0);  
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;.unitize-padding(8, 14);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .unitize(font-size, 16);  
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;.border-radius-multi(3px, 3px, 0, 0);  
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;margin: 0;  
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;display: block;  
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;cursor: pointer;  
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;color: @text-color;

&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&:hover { color: @brand-primary; }  
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}

&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;.is–active .navigation–link {  
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;.primary-gradient();  
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;font-weight: 600;  
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;color: #fff;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &:hover { color: #fff; }  
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}  
&nbsp;&nbsp; &nbsp;}  
}

@media screen and (min-width: @desktopViewportWidth) {  
&nbsp;&nbsp; &nbsp;.navigation-main {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .navigation–list {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; padding: 0;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }  
&nbsp;&nbsp; &nbsp;}  
}

und der Fehler lt. Konsole Firebug

&nbsp;

Ext.Error: You’re trying to decode an invalid JSON String:

## Ups! Ein Fehler ist aufgetreten!

Die nachfolgenden Hinweise sollten Ihnen weiterhelfen.

### File `../../vendors/less/normalize-less/normalize.less` not found. in all.less in vendor\oyejorge\less.php\lib\Less\Parser.php on line 2616

### Stack trace:

```
#0 vendor\oyejorge\less.php\lib\Less\Parser.php(339): Less\_Parser-\>Error('File `../../ven...') #1 vendor\oyejorge\less.php\lib\Less\Tree\Import.php(282): L .... 

&nbsp;

Gruß

&nbsp;

Marcel

&nbsp;

&nbsp;

&nbsp;
```

---

<div class="post-metadata">

**Author:** ![hms](https://avatars.discourse-cdn.com/v4/letter/h/e274bd/32.png) [@hms](https://forum.shopware.com/u/hms)\
**Post date:** [16. August 2016 um 09:48 UTC](https://forum.shopware.com/t/hintergrundbild/38966/7 "2016-08-16T09:48:02Z")

</div>

Hallo Marcel,  
wenn ich mich jetzt nicht wirklich irre als Neuling für SW gehört in die all.less keine CSS Regeln!  
Die all.less verlinkt zu den jeweiligen Less-Dateien.

Gruß  
HMS

---

<div class="post-metadata">

**Author:** ![steinsoftware](https://avatars.discourse-cdn.com/v4/letter/s/b487fb/32.png) [@steinsoftware](https://forum.shopware.com/u/steinsoftware)\
**Post date:** [16. August 2016 um 11:44 UTC](https://forum.shopware.com/t/hintergrundbild/38966/8 "2016-08-16T11:44:05Z")

</div>

> [@hms schrieb:](https://forum.shopware.com/profile/24168/hms "hms")
> 
> Hallo Marcel,  
> wenn ich mich jetzt nicht wirklich irre als Neuling für SW gehört in die all.less keine CSS Regeln!  
> Die all.less verlinkt zu den jeweiligen Less-Dateien.
> 
> Gruß  
> HMS

Ja das ist so richtig und steht so auch in der von mir verlinkten Developer-Dokumentation.

In der all.less steht nur @import „meineLess.less“ und in „meineLess.less“ steht dann der less-Code.

Siehe: [Getting started with LESS](https://developers.shopware.com/designers-guide/less/#using-less-in-your-theme)

---

<div class="post-metadata">

**Author:** ![aemarcel](https://avatars.discourse-cdn.com/v4/letter/a/958977/32.png) [@aemarcel](https://forum.shopware.com/u/aemarcel)\
**Post date:** [16. August 2016 um 16:19 UTC](https://forum.shopware.com/t/hintergrundbild/38966/9 "2016-08-16T16:19:40Z")

</div>

Hallo.

Leider habe ich das wohl nicht übersichtlich dargestellt. Es handelt sich oben um 2 Dateien. Einmal die all.less in der nur @import ist und einmal die main-navigation.less &nbsp;- Sorry und Danke für eure Hilfe.

&nbsp;

Gruß

&nbsp;

---

<div class="post-metadata">

**Author:** ![aemarcel](https://avatars.discourse-cdn.com/v4/letter/a/958977/32.png) [@aemarcel](https://forum.shopware.com/u/aemarcel)\
**Post date:** [17. August 2016 um 21:26 UTC](https://forum.shopware.com/t/hintergrundbild/38966/10 "2016-08-17T21:26:04Z")

</div>

Hallo nochmal.

&nbsp;

Fehler ist gefunden und Bild ist da.

Vielen Dank.

---

<div class="post-metadata">

**Author:** ![hms](https://avatars.discourse-cdn.com/v4/letter/h/e274bd/32.png) [@hms](https://forum.shopware.com/u/hms)\
**Post date:** [18. August 2016 um 06:32 UTC](https://forum.shopware.com/t/hintergrundbild/38966/11 "2016-08-18T06:32:19Z")

</div>

> [@aemarcel schrieb:](https://forum.shopware.com/profile/24395/aemarcel "aemarcel")
> 
> Hallo nochmal.
> 
> &nbsp;
> 
> Fehler ist gefunden und Bild ist da.
> 
> Vielen Dank.

Hallo aemarcel,

wie konntest Du das Problem lösen?

Gruß  
HMS&nbsp;

---

<div class="post-metadata">

**Author:** ![aemarcel](https://avatars.discourse-cdn.com/v4/letter/a/958977/32.png) [@aemarcel](https://forum.shopware.com/u/aemarcel)\
**Post date:** [19. August 2016 um 19:44 UTC](https://forum.shopware.com/t/hintergrundbild/38966/12 "2016-08-19T19:44:09Z")

</div>

Hallo.

&nbsp;

Habe aus der all.less alles gelöscht ausser @import “\_modules/main-navigation”; und in der main-navigation nur das Bild ergänzt.

body { background-image: url([http://localhost/media/image/favicon\_ret.jpg](http://localhost/media/image/favicon_ret.jpg)); background-repeat: no-repeat; background-position: center; }

Hatte mal mit background-size: cover getestet, sah aber nicht aus.

&nbsp;

Gruß
