Jump to content

Header Image Overlapping With Background Image


NikMac

Recommended Posts

(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:picture1vmn.pngNote 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.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...