Hintergrundbild im Kontaktformular 7 Textbereich

Lesezeit: 2 Minuten

Ich versuche, ein Hintergrundbild in ein Textfeld in einem Kontaktformular einzufügen. Das Problem ist, dass das Bild abgeschnitten wird, sobald die Größe des Browsers geändert wird, was bedeutet, dass es nicht perfekt in das Textfeld passt. Ich möchte, dass der Textbereich das gesamte Bild anzeigt und die Größe mit der Größenänderung des Browsers ändert. Keine Ahnung, ob es dafür überhaupt eine Lösung gibt.

Hier ist mein Code

#contactfooter {
    background-color: rgba(76, 73, 73, 0.44);
    color: rgb(183, 181, 181);
    border: 1px solid #676363;
    padding: 5px;
    width: 100%;
}

textarea#contactfooter {
background-color: rgba(76, 73, 73, 0.44);
background: url(https://psycheseminars.com/wp-content/uploads/2016/08/textback.jpg);
}

Hier ist die Seite https://psycheseminars.com/downloads/spirit-salt-lake-city/
Das Kontaktformular befindet sich in der Fußzeile.

Benutzer-Avatar
Cameron637

Sie können das gesamte Bild anzeigen lassen, indem Sie die Eigenschaft background-size des Textbereichs auf „Enthalten“ setzen, aber dann bedeckt das Bild aufgrund seiner Abmessungen nicht den gesamten Hintergrund, und der Rest des Raums wird mit einer Wiederholung gefüllt, sofern Sie dies nicht festlegen Background-Repeat zu No-Repeat. Ich denke jedoch, dass die Wiederholung in diesem Fall wünschenswerter wäre … Sie können trotzdem selbst damit spielen, aber um Ihre spezielle Frage zu beantworten, wie Sie das gesamte Bild anzeigen können, ändern Sie einfach Ihr CSS für das Textfeld wie folgt:

textarea#contactfooter {
    background-color: rgba(76, 73, 73, 0.44);
    background: url(https://psycheseminars.com/wp-content/uploads/2016/08/textback.jpg);
    background-size: contain;
}

Sie können auch die Hintergrundposition auf Mitte und die Hintergrundwiederholung auf Nichtwiederholung setzen, um nur ein Bild zentriert zu halten, aber auch hier hängt es nur davon ab, wie es aussehen soll:

textarea#contactfooter {
    background-color: rgba(76, 73, 73, 0.44);
    background: url(https://psycheseminars.com/wp-content/uploads/2016/08/textback.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

Können Sie bitte den folgenden Code versuchen.

textarea#contactfooter {
   background-size: cover;
   background-position: 50%;
}

  • Ich habe es viele Male getan, aber weil ich nicht genug Autorität habe, zählt es meine Stimme noch nicht.

    – Lara

    11. August 2016 um 5:05 Uhr

1095780cookie-checkHintergrundbild im Kontaktformular 7 Textbereich

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy