SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Evangelist WebMachine's Avatar
    Join Date
    Jun 2007
    Ontario, Canada
    2 Post(s)
    0 Thread(s)

    Adding images to wordpress theme

    I have been playing around with building Wordpress themes using '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).

    Code PHP:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    <html xmlns="">
    	<head profile="">
    		<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(); ?>
    	<body >
    	<div id="wrapper">
    		<div id="header">
    				<a href="<?php bloginfo('url'); ?>">
    					<?php bloginfo('name'); ?>
    			<img id="broker" src="images/mortgageBroker.png" width="138" height="159" title="mortgage broker" alt="mortgage broker"/>
    		</div> <!-- end of header div -->

    Code CSS:
    #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;
    Attached Images Attached Images

  2. #2
    SitePoint Wizard
    Join Date
    Oct 2001
    Lancaster, PA
    1 Post(s)
    0 Thread(s)
    I'm not one who can tell you how to do this placing individual images with css - but why not just design the header as one image and place the different elements where you want them?

    The new 2010 theme is a great starting point and it's super easy to create a header image to use in place of one of the default options.

    Web Designer or Small Business Owner?
    Need More Leads and More Clients?
    Get Free Marketing Tips, Tricks and Ideas Here!


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts