Reputation: 3
I have a fixed header on my page, inside the header is an image. Id like it to stay in place when the window is resized.
I have tried different positioning tags and wrapper divs, but i must not be doing something right.
My CSS is as follows
.header {
background: url("#") repeat-x scroll left top transparent;
height: 70px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
#headbar {
position:fixed;
z-index: 99999;
left:0px;
top:0px;
height:50px;
width:100%;
background:#273D90;
padding-top: 10px;
box-shadow: 0 0 50px 0;
}
#headbar img {
display: block;
text-indent: -9999px;
left: 5%;
overflow: hidden;
/*margin: 0 0 0 5%;*/
position: fixed;
float: left;
}
.imgwrap{
float: left;
position: absolute;
}
#logo {
float: left;
margin-right: 50px;
margin-top:25px;
}
and my HTML is
<div class="header">
<div id="headbar">
<div class="imgwrap">
<a href="index.html"><img alt="logo" src="images/whitelogo.png" height="50" width="100"></a>
</div>
</div>
</div>
Upvotes: 0
Views: 3944
Reputation: 78740
Your header is 100%
of the width of the page. Your image is positioned with left: 5%
. That is 5%
of the width of the header. Since the header resizes when the window does, this 5%
changes. Use a fixed value with px
or em
and it will not move.
Upvotes: 1
Reputation: 20492
#headbar img {
display: block;
text-indent: -9999px;
left: 5%; /* <-- % is relative */
overflow: hidden;
/*margin: 0 0 0 5%;*/
position: fixed;
float: left;
}
You will have to use NOT relatives units to achive what you want. Try using Absolute lengths units: the ‘cm’, ‘mm’, ‘in’, ‘pt’, ‘pc’, ‘px’ units
Upvotes: 0