Image Responsive＆amp;以水平为背景

Question

我的HTML页面顶部有一个标题，其中包含以下HeaderTitle图像。

我正在使用Bootstrap以使我的图像响应（img-responsive）以及使图像居中水平（中心块）。

我需要的是添加以下背景图像（HeaderBack.jpg）：

在HeaderTitle图像后面

所以当HeaderTitle调整大小时，背景会像这样填充所有宽度：

我应该在以下html / bootstrap代码中添加什么：

<div class="container-fluid">
   <div class="row">
     <a href="/Default.aspx"><img class="img-responsive center-block" src="/imgs/HeaderTitle.jpg" width="460" height="113" alt="" hspace="0" vspace="0" border="0" />
   </div>
</div>

Answer 1

您可能想要在图像周围创建另一个div，并将背景添加到该div。 （或者，如果你想让整个东西可以点击，你可以设置链接显示：阻止并将这些样式应用到链接中）

然后，将背景应用于容器div并将img放入其中。这是一个例子：

.header-bg {
  background: url('https://i.stack.imgur.com/gYTEF.jpg');
  background-size: contain;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<div class="header-bg">

  <a href="/Default.aspx">
    <img class="img-responsive center-block" src="https://i.stack.imgur.com/ACYHO.jpg" />
  </a>

</div>

然后你可以把它放到你需要的任何.container或.row中。