如何获取最大宽度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外的背景图片

回答

相关问题