Jump to content

Header Image Overlapping With Background Image


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>


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 by NikMac
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...