contact form 7 文本区域中的背景图像

Question

我正在尝试在联系表单的文本区域内添加背景图片。问题是，一旦调整浏览器的大小，图像就会被截断，这意味着它不能完全适合文本框。我希望 textarea 显示整个图像并通过调整浏览器大小来调整它的大小。完全不确定是否有解决方案。

这是我的代码

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

这是页面https://psycheseminars.com/downloads/spirit-salt-lake-city/ 联系表格在页脚中。

Answer 1

您可以通过设置要包含的文本区域的背景大小属性来显示整个图像，但是图像不会覆盖整个背景，因为它的尺寸，其余部分space 将重复填充，除非您将背景重复设置为不重复。但是，我认为在这种情况下重复会更可取......无论如何你可以自己玩，但要回答关于如何显示整个图像的具体问题，只需将文本区域的 css 更改为这个：

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

此外，您还可以将背景位置设置为居中，将背景重复设置为不重复，以仅使一张图像居中，但这同样取决于您希望它看起来如何：

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

Answer 2

你能试试下面的代码吗？

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

contact form 7 文本区域中的背景图像

Background image inside contact form 7 textarea

css

wordpress

background-image

contact-form