CSS3-宽度：100％-高度：自动-背景图像？

Question

我的问题很简单...我想有一张背景图片，我的徽标位于中间。

示例： 示例网站

我认为制作起来并不难，但我似乎无法完成...

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

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

• 检查我的网站

有人可以帮我吗？ 我如何将图像作为背景填充到整个宽度和自动高度，并将徽标放在图像顶部。

问候，米歇尔

Answer 1

为主体分配背景，如下所示：

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

Answer 2

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

http://codepen.io/anon/pen/IknKF

的HTML

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

的CSS

body {
  margin: 0;
  padding: 0;
}

.hero img {
  width: 100%;
}

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

那应该让您有一个响应式图像作为背景。 为了使站点真正具有响应性，如您在上面提到的示例中，请阅读有关媒体查询的信息。 这是Smashing Magazine的一个很好的教程，解释了媒体查询的基础：

http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

Answer 3

首先，将<div class="background">放在标题之外。

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

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