Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Header misbehaving



10:11 pm on Nov 25, 2011 (gmt 0)

I have a header image that is about 273 pixels tall and 2000 pixels wide, my HTML code looks something like this,

body class="body" onload="runSlideShow()">
<div><img src="/images/header.jpg" class="header"/></div>
<div class="wrapper">
<div class="borders">
<div class="content">

My CSS for header is simple

.header {

background: url('/images/header.jpg');


The problem is, without width 100% on the header I get a horizontal scroll bar all the way to 2000 pixels, If I add width 100% to the .header css... The header image shrinks in height to about 200pixels... and my text shrinks to the left?


10:28 pm on Nov 25, 2011 (gmt 0)

My main question is, why does width 100% mess up my image?


11:06 pm on Nov 25, 2011 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month

Because your background is bigger than 99% of all browser windows. Your choices are scale, crop or scroll.

Featured Threads

Hot Threads This Week

Hot Threads This Month