Hintergrundbild in Kontaktformular 7 textarea

Question

Ich versuche ein Hintergrundbild in einem Textfeld in einem Kontaktformular hinzuzufügen. Das Problem ist, dass sobald die Größe des Browsers geändert wird, das Bild abgeschnitten wird, was bedeutet, dass es nicht perfekt in die Textbereich-Box passt. Ich möchte, dass das Textfeld das gesamte Bild anzeigt und seine Größe mit der Größe des Browsers ändert. Ich bin mir nicht sicher, ob es überhaupt eine Lösung dafür 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 in der Fußzeile ist.

Answer 1

Können Sie bitte den folgenden Code ausprobieren.

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

Answer 2

Sie können das gesamte Bild anzeigen lassen, indem Sie die Eigenschaft backgroundsize des Textareas festlegen, aber dann wird das Bild aufgrund seiner Abmessungen nicht den gesamten Hintergrund abdecken und der Rest des Raums wird mit einem gefüllt Wiederholen Sie den Vorgang, es sei denn, Sie legen Hintergrund-Wiederholung auf "Keine Wiederholung" fest. Allerdings denke ich, dass die Wiederholung in diesem Fall wünschenswerter wäre ... trotzdem kannst du selbst damit spielen, aber um deine spezifische Frage zu beantworten, wie man das ganze Bild zum Anzeigen bringt, ändere einfach dein CSS für das Textfeld auf:

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; 
} 

auch könnten Sie auch die Hintergrund-Position zum Zentrum und background-repeat zu no-repeat setzen nur ein Bild zentriert ist, zu halten, aber wieder es kommt nur darauf an, wie Sie es sehen wollen:

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; 
}