I'm trying to work out if it's possible to use a fluid background image using 'img' for a header, whilst keeping the menu and page contents directly beneath it inline with the fluid resizing.
The CSS is:
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%;}
The html:
<div id="header-wrapper" class="clearfix">
<img id="header-wrapper" src="/images/new-header.jpg" alt="" />
</div>
</div>
You've made this loads more complicated than it needs to be with absolute positioning. All you need is height: auto
on the image.
<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%;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.