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