NikMac Posted March 5, 2010 Report Share Posted March 5, 2010 (edited) (This could be an HTML issue, but it's CSS as far as I know).Hi there, I've been trying to place a banner image in my header, but it overlaps with the page background and creates unwanted "white space". Here is a screenshot for clarification:Note how the white space around the "image" area blocks out the background gradient. How can I remove this white space and display only the image?Here is the code:HTML <body><div id="wrap"> <div id="header"> <div id="header-inner"> <div id="search"></div> <h1>Page Title</h1> </div> CSS: html {font-size:100.01%;height:101%;}body { height:100%; font:62.5%/1.4 Arial,Tahoma,Geneva,Helvetica,sans-serif; background: url(../images/backgrounds/bg_body.jpg) repeat-x top; width:100%; color:#333 }#wrap {width:960px;margin:0 auto;}#header { height:111px; width:960px; margin:0; padding:0;}#header-inner { background: #FFF url(../images/banner.jpg) no-repeat bottom center; height: 54px; width: 960px; padding:10px; white-space: nowrap; z-index:-1} "Banner.jpg" is 54x200px. However, in the webpage it displays on top of "bg_body.jpg" and creates white space around the image (which hides some of "bg_body.jpg"). Adding "white-space: nowrap;" fixed a part of the issue, but "banner.jpg" still creates additional "white space" throughout the width of "#headder-inner", not just around the image. Is there a way to fix this, apart from changing the actual image to accomodate "bg_body.jpg"?In other words, is there a way to display _only_ "banner.jpg" in the centre (well preferably just right of the <h1> tags, in between H1 and Search) of the header, without creating a huge block of white space?I hope that made sense, please ask if not.Thanks. Edited March 7, 2010 by NikMac Link to comment Share on other sites More sharing options...
thescientist Posted March 10, 2010 Report Share Posted March 10, 2010 make the image display: block and remove margins and paddings; i.e. set them to 0. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now