流体背景图像

我正试图解决如果可以使用流体背景图像使用'img'作为标题，同时保持菜单和页面内容直接位于流体大小调整的内联。流体背景图像

的CSS是：

img#header-wrapper { 
    width: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
     z-index:10; 
} 

#content-wrapper {padding-top:266px;float:left;overflow: hidden;border-bottom: 0;position: relative;background-color:white;height: 100%;}

的HTML：

<div id="header-wrapper" class="clearfix"> 
<img id="header-wrapper" src="/images/new-header.jpg" alt="" /> 
    </div> 
</div>

来源

2012-10-17 321

使用JavaScript来获取所需的高度？ – twodayslate

只浮动＃标头包装和＃content-wrapper离开，并删除所有绝对/相对定位的东西，它的工作 – Andy

我看到的第一个问题是你使用相同的ID为div和IMG。 ID的应该是独特的项目。每页显示一个。 –

您作出负载复杂得多，它需要有绝对定位。所有你需要的是图像上的height: auto。

LIVE DEMO >

<div class="header"> 
    <img src="http://www.dev.inside-guides.co.uk/images/new-header.jpg" /> 
</div> 
<div class="nav"> 
    NAV 
</div> 

.header { 
    width: 100%; 
    margin 0 0 10px 0; 
} 

.header img { 
    width: 100%; 
    height: auto; 
} 

.nav { 
    background: red; 
    width: 100%; 
}

来源

2012-10-17 12:14:10 SpaceBeers

你100％不需要此JavaScript的JavaScript。 – SpaceBeers

我不担心这件事。这种方法完全没有问题。 – SpaceBeers

他们的本意是？ – SpaceBeers

流体背景图像

回答

相关问题