Welcome to WebmasterWorld Guest from 54.196.33.246

Forum Moderators: not2easy

Message Too Old, No Replies

Header misbehaving

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

New User

5+ Year Member

joined:Nov 8, 2011
posts: 10
votes: 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)

New User

5+ Year Member

joined:Nov 8, 2011
posts: 10
votes: 0


My main question is, why does width 100% mess up my image?
11:06 pm on Nov 25, 2011 (gmt 0)

Senior Member from US 

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

joined:Apr 9, 2011
posts:14146
votes: 540


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

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members