homepage Welcome to WebmasterWorld Guest from 54.163.72.86
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
dardisintel




msg:4391138
 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?

 

dardisintel




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

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

lucy24




msg:4391162
 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