横幅图像应该有宽度100%
问题描述:
我已经包含横幅图像。在我的一个代码中,它可以正常工作,但是当我在另一个代码中包含相同的横幅时,它无法正常工作。你能告诉我原因吗?在我的新代码中,我看到了横幅外的空白区域。横幅图像应该有宽度100%
http://jsfiddle.net/rajkumart08/y88WX/29/embedded/result/
.home .hero-unit {
background: none;
height: 318px;
padding: 1px 620px 0 0;
margin-right: -100px;
margin-left: -100px;
margin-bottom: 0;
background: url("http://www.defie.co/designerImages/defie_landing_page.png") right bottom no-repeat;
}
.hero-unit {
padding: 60px;
margin-bottom: 30px;
background-color: #eee;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
答
.hero单元只有1250px和你的背景图像是容器内声明。尴尬的利润率是文字不会叠加在图像上的原因。在实际上是屏幕100%的div中定义背景。此外,请注意.container不是屏幕的100%。创建一个包含容器和您的.hero单元与背景图像的新div。
答
删除被您所包裹你的“.hero单元”中的“.container”选择设置宽度。
或者你可以嵌套你的“.hero单元内“.container” '
<div class="hero-unit'>
<div class="container"> // Banner text etc </div>
</div><!-- /hero-unit -->
100%的英雄单位或100%的整个屏幕? – penner 2013-03-04 19:49:57