如何獲取最大寬度div外的背景圖片

我有一個響應式網站，其最大寬度設置爲1000px，但我需要適合背景圖片，它將重疊其中一個div，並且還放置完整頁寬底部邊界到其他divs。如何獲取最大寬度div外的背景圖片

的代碼，我是這樣的：

.container { 
 
width: 100%; 
 
max-width: 1000px; 
 
} 
 

 

 
.logotest { 
 
background-color: #03b9e5; 
 
height: 50px; 
 
} 
 

 
.navtest { 
 
background-color: #e4ed00; 
 
height: 25px; 
 
} 
 

 
.socialtest { 
 
background-color: #ab801a; 
 
height: 25px; 
 
} 
 

 
.main { 
 
height: 750px; 
 
background: url(background.jpg) no-repeat top center; 
 
margin: auto; 
 
} 
 

 
.line { 
 
border-bottom: 1px solid black; 
 
} 
 

 
.container:after { 
 
clear: both; 
 
content: "."; 
 
display: block; 
 
height: 0; 
 
visibility: hidden; 
 
}

<body> 
 
<div class="container" id="first"> 
 
<div class="logotest"> 
 
</div> 
 
<div class="socialtest"> 
 
</div> 
 
<div class="navtest"> \t 
 
</div> 
 
</div> 
 
<div class="line"></div> 
 

 
<div class="main line" id="second"> 
 

 
</div><div class="container"> 
 
<div id="third"> 
 
</div> 
 
</div> 
 
</body>

我得到正確的寬度和底部邊框在整個頁面的寬度會第一個div，第二個div得到了背景圖片顯示，但1000px的最大寬度不再適用。下邊框顯示正確（除第二個和第三個div），第三個div再次獲得了正確的最大寬度。

我在做什麼錯誤/沒有做到獲得第二個div的最大寬度？

來源

2014-10-22 lomenak

你玩過'background-size：cover;'和一個外部包裝器？ – Sharky 2014-10-22 08:23:01

最大寬度應用於'container div's'。第二個div既沒有class容器也沒有父容器div。 – James 2014-10-22 08:51:49

您的解決方案

如果瀏覽器支持background-size財產是對你不夠好，你可以使用background-size: cover;。檢查here或here以查看瀏覽器支持。

下面是顯示其工作原理的代碼片段。如果您希望它始終居中，請務必將背景圖像定位到center center。

.container { 
 
    width: 100%; 
 
    max-width: 300px; 
 
    margin: 0 auto; 
 
} 
 
.line { 
 
    border-bottom: 1px solid black; 
 
} 
 
.logotest { 
 
    background-color: #03b9e5; 
 
    height: 50px; 
 
} 
 
.navtest { 
 
    background-color: #e4ed00; 
 
    height: 25px; 
 
} 
 
.socialtest { 
 
    background-color: #ab801a; 
 
    height: 25px; 
 
} 
 
.main { 
 
    height: 250px; 
 
    background: url(http://lorempixel.com/250/250) no-repeat center center; 
 
    background-size: cover; /* This does the magic */ 
 
} 
 
.container:after { 
 
    clear: both; 
 
    content: "."; 
 
    display: block; 
 
    height: 0; 
 
    visibility: hidden; 
 
}

<body> 
 
    <div class="container" id="first"> 
 
    <div class="logotest"> 
 
    </div> 
 
    <div class="socialtest"> 
 
    </div> 
 
    <div class="navtest"> 
 
    </div> 
 
    </div> 
 
    <div class="line"></div> 
 

 

 
    <div class="main" id="second"> 
 
    <div class="container">Put your content in here.</div> 
 
    </div> 
 
    <div class="line"></div> 
 
    <div class="container"> 
 
    <div id="third"> 
 
    </div> 
 
    </div> 
 
    <div class="line"></div> 
 
</body>

最後（但並非最不重要）

你可能要檢查有關網頁設計響應圖像的狀態這篇大文章，這將幫助你如果你正在進入響應式網頁設計：Responsive images done right.

來源

2014-10-22 08:50:34 Pipo

第一個解決方案也不起作用。與我的原始解決方案類似（第二個div部分對圖像和內容使用全屏寬度），但是您的解決方案沒有給出第一條底線全屏寬度。 – lomenak 2014-10-22 19:03:05

我不太明白你想要你的底線。你是否想用'container'類和'main'類來分隔你的div（這意味着三行）？你想要你的線條是全屏，甚至超過1000像素寬度？你能張貼一張照片來顯示你在做什麼嗎？ – Pipo 2014-10-23 08:08:32

@lomenak我已經更新了我的答案，在'container'和'main'類div下面添加行。該行現在是全屏顯示。我已將您的'max-width'從1000px更改爲300px，以便您可以查看這是否是您的要求（只需在您的代碼中將300px替換爲1000px）。我已在每個「容器」和「主」div下面添加了一個「

」全屏線，是您想要的嗎？當我做了一些更改之後，請務必檢查整個代碼。 – Pipo 2014-10-23 08:27:33

如何獲取最大寬度div外的背景圖片

回答

相關問題