I have been playing around with building Wordpress themes using wpdesigner.com 's tutorial. It worked out really well, but when I try to add my own design to the theme, I run into problems sometimes … usually with adding images.
My header has a background image which includes the logo to the left. That worked fine. But when I tried to place an image of a person on the header’s right hand side, it won’t show up. Below is my last attempt. Also, the alt tag text is showing up as text overlapping the logo in the background image. Why do I always have problems placing an image on top of a div that has a background image in Wordpress? (That’s the only time is causes problems.)
I have included a screenshot of the header without the background image (I don’t want to show the logo).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta name="generator" content="Wordpress <?php bloginfo('version'); ?>" />
<!-- leave this for stats please -->
<!-- link to external stylesheet -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_get_archives('type=monthly&format=link'); ?>
<?php //comments_popup_script(); // off by default ?>
<?php wp_head(); ?>
</head>
<body >
<div id="wrapper">
<div id="header">
<h1>
<a href="<?php bloginfo('url'); ?>">
<?php bloginfo('name'); ?>
</a>
</h1>
<img id="broker" src="images/mortgageBroker.png" width="138" height="159" title="mortgage broker" alt="mortgage broker"/>
</div> <!-- end of header div -->
#header {
width: 960px;
height: 160px;
position: relative;
background-image: url(images/headerBkgd.png);
background-position: top left;
background-repeat: no-repeat;
border-bottom: 1px solid #666;
}
#header #broker {
position: absolute;
float: right;
z-index: 1;
}