Jump to content

Header Width


bgoodin

Recommended Posts

I'm learning CSS as I work through my current project and I've run into an issue with my header div.

 

http://www.mjkelly.com/new/anothertest.html is the site.

 

I have the header div width set to 100% and it looks fine until I 'restore' my window to a smaller size. At that point, the background image ends when the content (header image), leaving a white space to the right.

 

Anyone have any ideas on how to fix it so that the div background image stays the width of window, no matter the size.

 

Also, any comments on the CSS would be appreciated.

 

Thanks!

Brandon

Link to comment
Share on other sites

Delete the width: 100%

 

#header {

position:absolute;

/*width:100%;*/

height: 170px;

background-image:url(images/header_bg.jpg);

margin:0 0 0 0;

}

 

width: 100% means that it starts at 100% of the window, but you have a horizontal scrollbar and when you scroll, the background moves away from the right side maintaining its original position; I tested and found that deleting the width: 100% made it continue as far right as it needs to.

Edited by Wickham
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...