### [Hinzufügen eines Hintergrundbilds zu Ihren Formularen](https://wpforms.com/docs/how-to-add-a-background-image-in-wpforms/)
**Veröffentlicht:** 27. November 2023
**Autor:** Umair Majeed
**Auszug:** Erfahren Sie, wie Sie Ihrem Formular ein Hintergrundbild hinzufügen.
**Inhalt:**
Möchten Sie wissen, wie Sie Ihren Formularen Hintergrundbilder hinzufügen? Mit CSS ist es einfach, Ihr Formular mit einem Bild oder einem Farbverlauf als Hintergrund zu gestalten!
Diese Anleitung zeigt Ihnen, wie Sie Ihrem Formular ein Hintergrundbild hinzufügen.
**Hinweis:** Die Schritte in dieser Anleitung erfordern [das Hinzufügen einer CSS-Klasse zu Ihrer Website](https://wpforms.com/docs/how-to-add-custom-css-to-your-wpforms/). Wenn Sie einen einfacheren Ansatz bevorzugen, der das Hinzufügen von benutzerdefiniertem CSS nicht beinhaltet, lesen Sie unsere Anleitung zur [Verwendung von Formularvorlagen](https://wpforms.com/docs/using-form-themes/), um zu erfahren, wie.
---
### 1. Auswahl eines Hintergrundbilds
Um zu beginnen, müssen Sie ein Bild auswählen, das als Hintergrund für Ihr Formular verwendet werden soll. Sie können jedes Bild aus Ihrer Mediathek oder von überall im Internet verwenden, auf das Ihre Website zugreifen kann.
#### Zu berücksichtigende Punkte
Für maximale Lesbarkeit sorgen Sie für ausreichenden Kontrast zwischen dem Hintergrundbild und jeglichem Text oder Feldern in Ihrem Formular.
Vermeiden Sie beispielsweise die Verwendung von hellem Text auf hellem Hintergrund. Verwenden Sie stattdessen dunkleren Text auf helleren Hintergründen und helleren Text auf dunklen Hintergründen.
### 2. Auswahl eines Formulars
Wählen Sie als Nächstes das Formular aus, das Sie anpassen möchten. Wenn Sie noch [ein Formular erstellen](https://wpforms.com/docs/creating-first-form/) müssen, fügen Sie ein neues hinzu, indem Sie auf **WPForms » Neu hinzufügen** klicken.
Sie können aus einer der vielen verfügbaren [Formularvorlagen](https://wpforms.com/templates) auswählen, um loszulegen.
Wenn keine der Standardvorlagen Ihren Anforderungen entspricht, können Sie dennoch eine ähnliche Vorlage auswählen und sie im Formular-Generator anpassen.
### 3. Hinzufügen eines Hintergrundbilds zu Ihrem Formular
Wechseln Sie im Formular-Generator zu **Einstellungen » Allgemein » Erweitert**.
Geben Sie hier unter **Formular-CSS-Klasse** einen Klassennamen ein. Sie können Ihrer Klasse einen beliebigen Namen geben, aber wir empfehlen, `wpf-` als Präfix hinzuzufügen. Dies hilft, Konflikte zwischen Ihrem benutzerdefinierten CSS-Code und Themes oder Plugins auf Ihrer Website zu vermeiden.
**Hinweis:** Um Probleme zu vermeiden, stellen Sie sicher, dass Ihr Klassenname mit einem Buchstaben beginnt. Denken Sie auch daran, dass Klassennamen in CSS Groß- und Kleinschreibung beachten. Weitere Informationen finden Sie in unserem [Einführungsleitfaden für Styling](https://wpforms.com/docs/how-to-style-wpforms-with-custom-css-beginners-guide/) und in den Anleitungen zum [Hinzufügen von Klassen zu WPForms](https://wpforms.com/docs/how-to-add-custom-css-to-your-wpforms/).
#### Verwenden eines vorhandenen Bilds
Wenn Sie ein Bild aus Ihrer Mediathek verwenden möchten, benötigen Sie die vollständige Bild-URL. Um diese zu erhalten, gehen Sie zunächst im WordPress-Admin-Dashboard zu **Medien » Mediathek**.
Klicken Sie hier auf das Bild, das Sie verwenden möchten.
Klicken Sie im sich öffnenden Dialogfeld auf **URL in die Zwischenablage kopieren**.
Dadurch wird die Bild-URL in Ihre Zwischenablage kopiert.
**Hinweis:** Bei Bildern aus anderen Quellen im Internet kopieren Sie die URL, indem Sie mit der rechten Maustaste auf das Bild klicken und **Bildadresse kopieren** auswählen.
Der angezeigte Menütext kann je nach Ihrem Browser leicht variieren. Er erfüllt jedoch dieselbe Funktion wie das Klicken auf **URL in die Zwischenablage kopieren** in der Mediathek.
Sobald Sie dies getan haben, kehren Sie zum WordPress-Admin-Dashboard zurück und gehen Sie zu **Design » Customizer**, dann wählen Sie **Zusätzliches CSS**.
Erstellen Sie als Nächstes eine benutzerdefinierte Klasse mit der Eigenschaft `background-image` und fügen Sie die zuvor kopierte URL ein.
Wir haben unten ein Beispiel für eine solche Klasse geschrieben. Denken Sie daran, `/path/wpforms-backdrop.png` durch die tatsächliche URL Ihres Bilds zu ersetzen.
Ihre Einstellungen sollten etwa so aussehen.
Sobald Sie sicher sind, dass Ihr Code korrekt ist, klicken Sie auf **Veröffentlichen**, um Ihre Änderungen zu speichern.
Wenn keine Fehler in Ihrem Code vorhanden sind, hat Ihr Formular nun ein Hintergrundbild. Hier ist ein Beispielformular, das den obigen Code verwendet:
#### Verwenden eines Farbverlaufs als Hintergrundbild
Mit CSS können Farbverläufe als Bilder verwendet werden, und diese Lösung funktioniert auch mit Ihren Formularen. Farbverläufe sind sehr gut anpassbar und können beliebig viele Farben verwenden.
Da Farbverläufe automatisch generiert werden, benötigen Sie kein Quellbild aus Ihrer Mediathek oder von anderswo im Internet. Dies bietet den Vorteil erhöhter Geschwindigkeit und Einzigartigkeit. Sie müssen sich auch keine Sorgen machen, dass das Quellbild verloren geht.
Es gibt drei Arten von Farbverläufen, die in CSS verfügbar sind:
- `conic-gradient()`
- `linear-gradient()`
- `radial-gradient()`
**Hinweis:** Wenn Sie mehr über die Verwendung von Farbverläufen in CSS erfahren möchten, empfehlen wir [diese Seite im Mozilla Developer Network zu lesen](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients).
In diesem Beispiel zeigen wir Ihnen, wie Sie einen einfachen linearen Farbverlauf als Hintergrund für Ihr Formular verwenden. Schreiben Sie einfach Ihre Klasse wie zuvor, aber anstatt eine URL zu verwenden, verwenden wir die CSS-Funktion `linear-gradient()`.
Um zu sehen, wie dies funktioniert, schauen Sie sich das folgende Codebeispiel an:
```
.wpf-custom-background {
background-image: linear-gradient(#0299ed, #FFFFFF) !important;
/*Padding ist nicht notwendig, aber sehr empfehlenswert*/
padding: 15px 35px !important;
}
```
Dies erzeugt einen sanften Farbverlauf von Blau zu Weiß als Hintergrundbild für Ihr Formular:
**Hinweis:** Wenn Sie lieber eine codefreie Lösung zur Generierung Ihrer Farbverläufe verwenden möchten, können Sie Online-Ressourcen nutzen, [wie z. B. CSS Gradient (cssgradient.io)](https://cssgradient.io/).
### Häufig gestellte Fragen
Nachfolgend beantworten wir einige der häufigsten Fragen zum Hinzufügen eines Hintergrundbilds zu Formularen.
##### Wie füge ich meinen Formularen, die das Conversational Forms Addon verwenden, ein Hintergrundbild hinzu?
Wenn Sie ein Hintergrundbild mit der oben beschriebenen Methode hinzufügen, wird es nicht auf das Formular angewendet. Dies liegt daran, dass Konversationsformulare eine andere Styling-Option verwenden.
Um einem Formular, das das [Conversational Forms Addon](https://wpforms.com/docs/how-to-install-and-use-the-conversational-forms-addon/) verwendet, ein Hintergrundbild hinzuzufügen, müssen Sie den CSS-Selektor `#wpforms-conversational-form-page` verwenden. Hier ist ein Beispielcode. Ersetzen Sie den Pfad in der `url()`-Eigenschaft durch das tatsächliche Bild, das Sie verwenden möchten.
```
#wpforms-conversational-form-page {
background-image: url(/path/wpforms-backdrop.png) !important;
background-position: center; /* Bild zentrieren */
background-repeat: no-repeat; /* Bild nicht wiederholen */
background-size: cover;
}
```
Das ist alles! Jetzt wissen Sie, wie Sie Ihren Formularen in WPForms ein Hintergrundbild hinzufügen.
Möchten Sie als Nächstes erfahren, wie Sie Ihre Formulare ohne Code gestalten können? Sehen Sie sich unseren [Leitfaden zur Anpassung von WPForms mit CSS Hero](https://wpforms.com/docs/how-to-style-wpforms-without-knowing-any-code/) an.
**Kategorien:** Styling, Styling und Anpassung
---