Html CSS3-宽度：100%-高度：自动背景图像？ 我的问题很简单…我想有一个背景图像，我的标志在中间。

例如：

我认为这不是很难做到，但我似乎无法做到这一点

我希望背景图像填充整个宽度（始终），并希望高度按比例调整。（响应性）如示例中所示

出于某种原因，我的代码没有这样做

• 检查

有人能帮我吗？如何将一幅图像作为背景，在图像顶部用我的徽标填充整个宽度和自动高度

问候,， 米切尔

首先，把

放在你的头球之外

然后在CSS中添加以下内容：

.background{
    background:url('http://www.md-esign.be/images/hdbg.png') 50% 50% no-repeat;
    height:400px;
    background-size:cover;
}

---

为主体指定一个背景，如下所示：

 body{
        background-image: url('../img/yourimagefilename.jpg');
        background-position: top center;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: cover;
        background-color: #343433;
        height: 100%;
    }

---

这是使用覆盖视口宽度的背景图像创建英雄横幅的另一种方法：

HTML

这应该允许你有一个响应图像作为背景。为了使网站真正响应您上面提到的示例，请阅读有关媒体查询的内容。下面是《粉碎》杂志提供的一个很好的教程，它解释了媒体查询的基础知识：

---

请使用相关代码更新您的问题。如果您选择，请单击复选标记，将我的问题标记为正确。虽然body是通常的答案，但在您的情况下是错误的，因为他希望以名为的div为目标。background的高度仅为400px，而不是完整的页面，并且同样无法工作，因为他需要首先从header元素中删除.background div，然后根据需要将其放置在header元素的外部，不管它在前面还是下面。另外，如果你有背景尺寸：coverYes，我的身高只有400px idd，那么背景附件：fixed是不需要的。你能解释一下为什么背景不能在页眉内吗？为什么一定要在页眉外？因为如果你把这个div设为400px高度，那么页眉会延伸到400px高度。我假设你想让你的头在背景上，但如果没有，就像在示例中让整个头使用背景和400px的高度，那么在我的代码中你需要改变.background到header只是问，但是…使用：header{background image；}有什么区别，或者只是从我的头中去掉.background div。他们看起来一样。。。为什么当我在标题上添加了一个背景图像时，我的文本会出现在图像的顶部？背景图像是否不被视为某种块？东西会在那个“层”上吗？但当你最小化浏览器时，你的绝对标志h1文本会在图像外浮动到文本中，或者在img下浮动。。。

<div class="hero">
 <img src="http://zerostrikes.com/demo/momentum/images/bg-1.jpg" alt="" />
 <div class="logo">
  <h1>LOGO</h1> 
 </div>
</div>

body {
  margin: 0;
  padding: 0;
}

.hero img {
  width: 100%;
}

.logo h1 {
  position: absolute;
  top: 300px;
  right: 50%;
  color: white;
}