# Hintergrundbild einsetzen

**URL:** <https://forum.shopware.com/t/hintergrundbild-einsetzen/17548>\
**Category:** Shopware 3.5\
**Tags:** themes--design\
**Created:** [3. Januar 2014 um 08:46 UTC](https://forum.shopware.com/t/hintergrundbild-einsetzen/17548 "2014-01-03T08:46:43Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![zawotec](https://avatars.discourse-cdn.com/v4/letter/z/3be4f8/32.png) [@zawotec](https://forum.shopware.com/u/zawotec)\
**Post date:** [3. Januar 2014 um 08:46 UTC](https://forum.shopware.com/t/hintergrundbild-einsetzen/17548/1 "2014-01-03T08:46:43Z")

</div>

Hallo! Wie bekomme ich ein überlagertes Hintergrundbild hin wie z.B. in diesem [Shop](http://www.sb-schweiss-shop.de/) auf der linken Seite?

---

<div class="post-metadata">

**Author:** ![Martin\_Schindler](https://avatars.discourse-cdn.com/v4/letter/m/22d042/32.png) [@Martin\_Schindler](https://forum.shopware.com/u/Martin_Schindler)\
**Post date:** [3. Januar 2014 um 10:09 UTC](https://forum.shopware.com/t/hintergrundbild-einsetzen/17548/2 "2014-01-03T10:09:57Z")

</div>

Guten Morgen, um genau zu sein handelt es sich hierbei nicht um ein Hintergrundbild der eigentlichen Seite, sondern um einen absolut positionierten DIV-Container mit einem höheren z-index als der Rest der Seite und einem dafür gesetzten Hintergrundbild. Man müsste also in der index.tpl einen DIV-Container (z.b. mit der Klasse „overlay“) anlegen und diesem folgende CSS Eigenschaften geben: position:absolute; background: url(…/pfad/zur/grafik.png) no-repeat 0 0 transparent; width: entsprechende breite in px; height: entsprechende höhe in px; z-index: 9999; left: abstand von links in px; top: abstand von oben in px; Nur wichtig ist hierbei noch, dass das überlagernde Element nicht zu weit in den eigentlichen Seiteninhalt hineinragt. Sollten sich dort nämlich Elemente (Navigation, Links, etc) befinden, die der User klicken kann/soll dann sind diese nicht mehr erreichbar, weil sie ja überlagert sind. Bei dem gezeigten Shop ist das so gebaut, dass das was augenscheinlich überlappt lediglich Bestandteil des Banners „SB Schweißtechnik 40 Jahre…“ ist. Das ist natürlich auch ein Weg, es nur so aussehen zu lassen als ob. Ich hoffe, das hilft weiter! Beste Grüße!

---

<div class="post-metadata">

**Author:** ![zawotec](https://avatars.discourse-cdn.com/v4/letter/z/3be4f8/32.png) [@zawotec](https://forum.shopware.com/u/zawotec)\
**Post date:** [3. Januar 2014 um 10:19 UTC](https://forum.shopware.com/t/hintergrundbild-einsetzen/17548/3 "2014-01-03T10:19:56Z")

</div>

Vielen Dank für die Antwort! Habe zwar jetzt, wenn ich ehrlich bin, nur Bahnhof verstanden, aber trotzdem danke! Das ist wirklich nett! Gibt es vielleicht irgendwo sowas wie eine Anleitung?

---

<div class="post-metadata">

**Author:** ![Martin\_Schindler](https://avatars.discourse-cdn.com/v4/letter/m/22d042/32.png) [@Martin\_Schindler](https://forum.shopware.com/u/Martin_Schindler)\
**Post date:** [5. Januar 2014 um 15:09 UTC](https://forum.shopware.com/t/hintergrundbild-einsetzen/17548/4 "2014-01-05T15:09:33Z")

</div>

Schwer zu sagen welches HTML und CSS Wissen vorhanden ist aber möglicherweise hilft dieses Beispiel weiter: [http://dustyreagan.com/using-css-to-absolute-position-object/](http://dustyreagan.com/using-css-to-absolute-position-object/)