Fixed Footer Backgrounds with CSS
Tags: BeginnerI’ve gotten a couple of emails asking me how to pull off this effect so I thought it may be helpful for others as well. When fixing a background image on the bottom of your page, the following technique seemed to be the easiest from my experience.
HTML
<div class="headwrap"> <!--Content Goes Here--> <div class="container"></div> <!--End Content--> </div>
CSS
We will first add the repeating footer image on our body tag and position it to the bottom as fixed.body {
margin: 0;
padding: 0;
background: #005094 url(footer_bg.jpg) fixed repeat-x left bottom;
width: 100%;
min-width:970px;/*--Fixes Background Bug--*/
}Then we will add in our header background in a div..headwrap {
background: url(body_bg.jpg) no-repeat center top;
float: left;
width: 100%;
}
Không có nhận xét nào:
Đăng nhận xét