homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Header misbehaving

Msg#: 4391136 posted 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?



Msg#: 4391136 posted 10:28 pm on Nov 25, 2011 (gmt 0)

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


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

Msg#: 4391136 posted 11:06 pm on Nov 25, 2011 (gmt 0)

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

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved