HTML背景自动调整大小

Question

我正在尝试将图像设置为背景，并在窗口更改大小时自动调整大小并自动居中。现在我有自动调整大小和自动中心工作完美，但我不知道如何使它成为我的背景图像。我不得不用PLUS（+）符号替换所有开始和结束符号。我目前的代码如下：

<div style="text-align: center;">
<img src="amazing.jpg" style="max-width: 100%; height: auto;" alt="Epoxy Flooring of NY" />
</div>

有什么建议让它成为背景而不仅仅是占据整个屏幕的图片？我需要在它上面的文字，而不是它下面。

Answer 1

欢迎来到stackoverflow-community：）

只需使用background-image - 属性而不是<img> - 标记。

<div style="background-image:url('amazing.jpg')">
   <!-- your text here -->
</div>

有关详细信息See here and here。

注意：

如果你使用background-image代替<img>，除非你给<div>一个高度，否则你不会看到任何内容，只需填写文字或/并设置它{{1}例如，100px。

Answer 2

有两种方法可以使用css background img属性，另一种方法使用HTML img标记。

https://jsfiddle.net/pdhgLap8/

基本上，您需要添加以使用背景图像

  background-image: url("https://i.imgur.com/SebQr4d.jpg");
  background-size: contain;
  background-repeat: no-repeat;

这将设置背景图像 这样做它只有它所在的div那么大 并使它不会重复填充div