联系表格 7 textarea 内的背景图片答案

【问题标题】：Background image inside contact form 7 textarea联系表格 7 textarea 内的背景图片
【发布时间】：2016-12-15 17:29:04
【问题描述】：

我正在尝试在联系表单的文本区域内添加背景图像。问题是，一旦浏览器调整大小，图像就会被截断，这意味着它不能完全适合 textarea 框。我希望 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/ 联系表格在页脚中。

【问题讨论】：

标签： css wordpress background-image contact-form

【解决方案1】：

你能试试下面的代码吗？

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

【讨论】：

我已经做过很多次了，但是因为我没有足够的权限，所以还没有算我的票。

【解决方案2】：

您可以通过设置 textarea 的 background-size 属性来显示整个图像，但是由于它的尺寸，图像不会覆盖整个背景，其余的空间将被重复填充除非您将 background-repeat 设置为 no-repeat。但是，我认为在这种情况下重复会更可取......无论如何，你可以自己玩它，但要回答你如何让整个图像显示的具体问题，只需将你的 textarea 的 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;
}

此外，您还可以将 background-position 设置为 center 并将 background-repeat 设置为 no-repeat 以保持一张图像居中，但同样取决于您希望它的外观：

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

【讨论】：