---
title: "So passen Sie den Hintergrund Ihrer App an | Anleitungen – GoodBarber"
description: "Hintergrund Der Hintergrund liegt hinter jeder Seite Ihrer App. Wählen Sie dafür eine Farbe, einen Farbverlauf oder ein Bild, dazu die Farbe der Linien zwischen den Elementen. Klicken Sie im Menü „My…"
canonical_url: "https://de.goodbarber.com/tutorials/design/so-passen-sie-den-hintergrund-ihrer-app-an/"
lang: de
---

# So passen Sie den Hintergrund Ihrer App an | Anleitungen – GoodBarber

[Zurück](https://de.goodbarber.com/tutorials/)

# So passen Sie den Hintergrund Ihrer App an

## Hintergrund

Der Hintergrund liegt hinter jeder Seite Ihrer App. Wählen Sie dafür eine Farbe, einen Farbverlauf oder ein Bild, dazu die Farbe der Linien zwischen den Elementen.

Klicken Sie im Menü „My App“ auf „App style“, dann unter „Additional options“ auf „Background and separators“.

## Farbe und Farbverlauf

Klicken Sie auf Color für eine einheitliche Farbe… oder öffnen Sie den Tab Gradient: ein linearer oder radialer Farbverlauf oder ein vorgefertigter wie „Blue Skies“.

Der Farbverlauf füllt den Hintergrund hinter Ihren Inhalten.

## Bilder

Für Smartphones können Sie auch ein Bild hinzufügen. Das Fragezeichen zeigt die empfohlene Größe: 1242 × 2208 Pixel.

Laden Sie das Bild mit Browse hoch oder wählen Sie eines aus Ihrer Library.

Das Bild liegt jetzt hinter Ihren Inhalten.

Portrait und Landscape nehmen die Bilder für Tablets im Hoch- und Querformat auf, jeweils mit eigener empfohlener Größe.

Ein Bild entfernen Sie über den Papierkorb am Vorschaubild, dann bestätigen Sie.

## Trennlinien

Wählen Sie unter Separators die Farbe der Linien zwischen den Elementen… wie bei den Zeilen des Bereichs Settings.

Damit Ihre Nutzer die Änderungen sehen, veröffentlichen Sie das Update Ihrer App über das Menü Publish.

## Ähnliche Videos

[DesignSo richten Sie Ihren Header ein](/tutorials/design/so-richten-sie-ihre-kopfzeile-ein/)

![So richten Sie Ihren Header ein](https://portal.ww-cdn.com/portal_static/images/videos1.c14acaebb684.jpg)

[DesignSo richten Sie den Stil Ihrer App ein](/tutorials/design/so-richten-sie-den-globalen-stil-ihrer-app-ein/)

![So richten Sie den Stil Ihrer App ein](https://portal.ww-cdn.com/portal_static/images/videos2.7fa910b14581.jpg)

[DesignSo passen Sie den Startbildschirm Ihrer App an](/tutorials/design/so-passen-sie-den-startbildschirm-ihrer-app-an/)

![So passen Sie den Startbildschirm Ihrer App an](https://portal.ww-cdn.com/portal_static/images/videos3.667f4857c54e.jpg)

[DesignSo richten Sie das Navigationsmenü Ihrer App ein](/tutorials/design/so-richten-sie-den-navigationsmodus-ihrer-app-ein/)

![So richten Sie das Navigationsmenü Ihrer App ein](https://portal.ww-cdn.com/portal_static/images/videos4.e9c3404b35cf.jpg)

[DesignSo passen Sie die Symbole Ihres Menüs an](/tutorials/design/so-passen-sie-die-symbole-ihres-menus-an/)

![So passen Sie die Symbole Ihres Menüs an](https://portal.ww-cdn.com/portal_static/images/videos5.a023e3a7a47c.jpg)

[DesignSo gestalten Sie Ihre Bereiche](/tutorials/design/so-gestalten-sie-ihre-bereiche/)

![So gestalten Sie Ihre Bereiche](https://portal.ww-cdn.com/portal_static/images/videos6.a0a8271792bd.jpg)

[DesignSo kopieren Sie das Design eines Bereichs](/tutorials/design/so-kopieren-sie-das-design-eines-bereichs/)

![So kopieren Sie das Design eines Bereichs](https://portal.ww-cdn.com/portal_static/images/videos7.8952466a8027.jpg)

[DesignSo gestalten Sie die Kategorien eines Bereichs](/tutorials/design/so-gestalten-sie-die-kategorien-eines-bereichs/)

![So gestalten Sie die Kategorien eines Bereichs](https://portal.ww-cdn.com/portal_static/images/videos8.fc945e8b95fd.jpg)

[DesignSo richten Sie Ihre Startseite ein](/tutorials/design/so-richten-sie-ihre-startseite-ein/)

![So richten Sie Ihre Startseite ein](https://portal.ww-cdn.com/portal_static/images/videos9.49f835842cd5.jpg)

[DesignSo wählen Sie die Größe Ihres Headers aus](/tutorials/design/how-to-choose-your-header-size/)

![So wählen Sie die Größe Ihres Headers aus](https://portal.ww-cdn.com/portal_static/images/videos_design_header.a341dbbe5c74.jpg)