header eigenes Bild einfügen

[speedy00]

Hallo
Ich habe hier ein wordpress theme in dem ich im header ein eigenes Bild einbinden würde.

Das Bild ist ein Panorama Foto und soll genau in die Mitte (oben-unten) des headers.
Also unterhalb von Home Keine Kategorien und oberhalb von Impressum / Kontakt ADIOZ Deutschland
php des headers

<div class="HeaderSubArea">
	<h1><a href="<?php echo get_option('home'); ?>"><?php bloginfo('name'); ?></a></h1>
	<span><?php bloginfo('description'); ?></span>
	<div class="SearchBox">
		<form method="get" action="<?php bloginfo('url'); ?>/">
			<input type="text" class="SearchQuery" id="SearchQuery" value="<?php _e('Search here...', 'Eos'); ?>" name="s" />
			<input type="submit" name="submit" class="SearchButton" value="<?php _e('Find', 'Eos'); ?>" />
		</form>
	</div>
	<div class="HeaderSubMenu" id="HeaderSubMenu">
		<ul>
			<?php
			if ($aOptions['pagemenu_dropdown'])
				wp_list_pages('orderby=menu_order&title_li=&depth=3');
			else
				wp_list_pages('orderby=menu_order&title_li=&depth=1');
			?>
		</ul>
		<span class="clear"></span>
	</div>
</div> <!-- Closes .HeaderSubArea -->

Die css dazu

/**
 * Main design
 */

body {
	background:#0f2233 url(./images/BodyBg.png) repeat-x 0 0;
	font-family:Arial, Helvetica, Verdana, sans-serif;
	font-size:small;
	text-align:center;
	line-height:normal;
}

p {
	margin:10px 0;
}

.PageContainer {
	text-align:left;
	width:964px;
	margin:20px auto;
}

#skipToContent {
	position:absolute;
	top:0;
	left:-9999px;
}

.Header {
	position:relative;
	z-index:900;
}

.HeaderSubArea {
	height:105px;
	background:url(./images/LayoutBgs.jpg) no-repeat 0 -50px;
	position:relative;
	z-index:800;
}
.HeaderSubArea h1 {
	position:absolute;
	left:50px;
	top:22px;
}
.HeaderSubArea h1 a,
.HeaderSubArea h1 a:visited {
	color:#c5ddeb;
	font-size:36px;
	font-family:Impact, Charcoal, sans-serif;
	text-decoration:none;
	letter-spacing:1px;
}
.HeaderSubArea span {
	position:absolute;
	left:52px;
	top:62px;
	color:#abc1cc;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
}
.HeaderSubArea .SearchBox {
	width:162px;
	height:22px;
	position:absolute;
	top:9px;
	right:22px;
	background:url(./images/LayoutBgs.jpg) no-repeat -2000px -100px;
}
.HeaderSubArea .SearchQuery {
	padding:4px 5px 4px 10px;
	width:127px;
	height:14px;
	font-size:11px;
	border:0;
	color:#b9d1cd;
	background:none;
}
.HeaderSubArea .SearchButton {
	position:absolute;
	overflow:hidden;
	top:3px;
	right:3px;
	width:16px;
	height:16px;
	padding:0;
	border:0;
	background:none;
	cursor:pointer;
	background:url(./images/LayoutBgs.jpg) no-repeat -2143px -103px;
	
	display:block;
	font-size:0;
	line-height:0;
}

.HeaderMenu {
	position:relative;
	padding:2px 20px 0;
	z-index:950;
	background:url(./images/LayoutBgs.jpg) no-repeat 0 0;
}
.HeaderMenu .clear {
	display:block;
	clear:both;
}
.HeaderMenu ul {
	height:100%;
}
.HeaderMenu li {
	float:left;
	position:relative;
	z-index:1;
	line-height:24px;
}
.HeaderMenu li a,
.HeaderMenu li a:visited {
	display:block;
	height:23px;
	line-height:24px;
	color:#daf0ff;
	font-size:12px;
	padding:0 8px;
}
.HeaderMenu li a:hover {
	background:url(./images/LayoutBgs.jpg) repeat-y -2000px -230px;
	text-decoration:none;
	border:1px solid #16394e;
	border-width:0 1px;
	padding:0 7px;
}
.HeaderMenu ul ul {
	height:auto;
	position:absolute;
	top:23px;
	left:-999em;
	background-color:#1f3d4d;
	border:1px solid #000;
	margin:0;
	z-index:1;
}
.HeaderMenu li li {
	float:none;
	width:180px;
}
.HeaderMenu li li a,
.HeaderMenu li li a:visited {
	height:auto;
	line-height:22px;
	padding:0 8px;
	width:164px;
	position:relative;
}
.HeaderMenu li li a:hover {
	background:#335f7b;
	border:0;
	padding:0 8px;
}
.HeaderMenu li:hover ul,
.HeaderMenu li.jHover ul {
	left:auto;
}
.HeaderMenu ul ul ul,
.HeaderMenu li:hover ul ul,
.HeaderMenu li.jHover ul ul {
	top:-1px;
	left:-999em;
}
.HeaderMenu li li:hover ul,
.HeaderMenu li li.jHover ul {
	left:180px;
}

.HeaderSubMenu {
	position:absolute;
	right:30px;
	bottom:8px;
	z-index:2;
}
.HeaderSubMenu .clear {
	display:block;
	clear:both;
}
.HeaderSubMenu ul {
	height:100%;
}
.HeaderSubMenu li {
	float:left;
	margin:0 0 0 20px;
	position:relative;
}
.HeaderSubMenu a,
.HeaderSubMenu a:visited {
	color:#b8c5cc;
	display:block;
	height:30px;
	line-height:30px;
}
.HeaderSubMenu ul ul {
	height:auto;
	position:absolute;
	top:30px;
	left:-999em;
	background-color:#1f3d4d;
	border:1px solid #000;
	margin:0;
	z-index:1;
}
.HeaderSubMenu li li {
	float:none;
	width:180px;
	margin:0;
}
.HeaderSubMenu li li a,
.HeaderSubMenu li li a:visited {
	height:auto;
	line-height:22px;
	padding:0 8px;
	width:164px;
	position:relative;
}
.HeaderSubMenu li li a:hover {
	background:#335f7b;
	border:0;
	padding:0 8px;
	text-decoration:none;
}
.HeaderSubMenu li:hover ul,
.HeaderSubMenu li.jHover ul {
	left:0;
}
.HeaderSubMenu ul ul ul,
.HeaderSubMenu li:hover ul ul,
.HeaderSubMenu li.jHover ul ul {
	top:-1px;
	left:-999em;
}
.HeaderSubMenu li li:hover ul,
.HeaderSubMenu li li.jHover ul {
	left:180px;
}

Das es diesev div ist

<div class="HeaderSubArea">

und der css teil ab Zeile 169 ist weiss ich schon

.HeaderSubArea {
	height:105px;
	background:url(./images/LayoutBgs.jpg) no-repeat 0 -50px;
	position:relative;
	z-index:800;

was ich nicht schaff ist es unter die search box zu bekommen und das sich nicht auch der rest irgendwie immer mit verändert.

Ich bin dankbar für jede Hilfe.

 

[Duergy]

habs nur überflogen aber wenn du jetzt

.HeaderSubArea {
	height:105px;
	background:url(./images/deinimg.jpg) no-repeat 0 -50px;
	position:relative;
	z-index:800;
}

machst müsste es doch gehen oder?