Unwanted white-space around image

**NikMac** · 03-06-2010, 04:23 PM

(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 the code:

HTML

Code:

<body>
<div id="wrap">
	<div id="header">
		<div id="header-inner">
			<div id="search"></div>
			<h1>Page Title</h1>
		</div>

CSS:

Code:

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?
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?

I hope that made sense, please ask if not.
Thanks.

**kids** · 07:33 AM

Ouhm, white-space is only effect to text (label), I think! :-? Why don't you try

Quote:

#header-inner {
background: #FFF url(../images/banner.jpg) no-repeat bottom center;
height: 54px;
width: 960px;
padding:10px;
}

I see z-index don't take any role in this case!

**NikMac** · 05:14 PM

I tried that and there is still a large white rectangle around the image, blocking out the website background image.

Here is the screenshot again:

The image should only occupy the red rectangle, but instead there a large white area around the rectangle that I am trying to get rid of. How to do this?

Thanks.

**aldor** · 03-07-2010, 05:52 PM

Put the background image in the div #wrap and make the width of the div #head-inner the same width as your banner ie 200px, and centre it.

Also you have neglected to put a semi-colon after the color declaration in your body.

**NikMac** · 07:25 PM

Thanks for the reply. I could not get that to work because of other elements (a navigation menu near the header), but you gave me another idea, and as usual I overlooked the simplest answer; make another <div> for the image.

This _appears_ to work:

Code:

#banner {background: #FFF url(../images/banner.jpg) no-repeat center; height:54px; width:239px; position:absolute;top:15px;left:250px;z-index:-1;}

...but now it displays incorrectly if I make my browser window larger/smaller. I know this has to do with "position:absolute" but what is a better option?

Also, I thought that a semicolon was not necessary in the final line of an id/class? I added it anyways.

Thanks.