I'm stumped trying to add an image header to WP header

Discussion in 'HTML & Website Design' started by MrMarco, Feb 28, 2007.

  1. #1
    I'm hoping someone here can help me add a header image for my site. I made it with photoshop and tried to add it to my wordpress site but it still shows the original bland color where the title is. It would be great to use the whole image as the home link and cover the entire top of the page, but if that's too involved I can keep the text on the left and fill the rest of the space with an image.

    I know this post is most likely over loaded with info and may be asking a lot but I wanted to give as much information to start with just in case someone has the inclination to help me out. Thank you in advance for clicking on the thread and for any help you can give.

    The site is www.health-bits.com - I've added the .jpg image to the file ~/wp-content/images directory. In the style.css I changed the header info from:
    .header {
    	border-color:#AAAAAA;
    	background-color:#F8F7EF;
    	height:124px;
    	background-image:url("images/header-bg.jpg");
    background-repeat:repeat-x;
    background-position:center;
    	border-style:solid;
    	margin-bottom:5px;
    	border-width: 1px;
    	padding-left:10px;
    }
    PHP:
    to:
    .header {
    	background-image:url("http://health-bits.com/wp-content/images/health_diet_exercise_image.jpg");
    background-position:center;
    }
    PHP:
    Since that didn't seem to work (unless I screwed that up) I'm assuming I need to change either the header.php or the style.php but here's where I'm stumped. I'm not sure which one to change and how.

    Here's the header.php:
    <head>
    		<title>
    			<?php bloginfo('name'); ?> - <?php bloginfo('description'); ?>
    			<?php wp_title(); ?>
    		</title>
    
    		<!-- Decide whether to use external or internal style sheet -->
    		<?php if (tiga_ExternalStyleSheet() == 'TRUE') { ?>
    			<link rel="stylesheet"
    						href="<?php bloginfo('stylesheet_url'); ?>"
    						type="text/css"
    						media="screen" />
    		<?php } else { ?>
    			<link rel="stylesheet"
    						href="<?php bloginfo('stylesheet_directory'); ?>/style.php"
    						type="text/css"
    						media="screen" />
    		<?php } ?>
    
    		<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
    		<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 if (function_exists('geo_PopUpScript')) { geo_PopUpScript(); } ?>
    
    		<?php wp_get_archives('type=monthly&format=link'); ?>
    		<?php wp_head(); ?>
    	</head>
    	<body>
    	<div class="page">
    		<div class="header">
    			<h1><a class="blog-name" href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
    			<h2 class="blog-description"><?php bloginfo('description'); ?></h2>
    		</div>
    PHP:
    And here's the style.php:
    .header {
    	border-color:<?php tiga_headerBorderColor(); ?>;
    	background-color:<?php tiga_headerBgColor(); ?>;
    	height:<?php tiga_headerHeight(); ?>px;
    	<?php tiga_bgImage('header'); ?>
    	border-style:solid;
    	margin-bottom:5px;
    	border-width: 1px;
    	padding-left:10px;
    }
    
    .blog-name:link, .blog-name:visited, .blog-name:hover {
    	color:<?php tiga_getValue('blogNameColor'); ?>;
    	font-family:<?php tiga_getValue('blogNameFontFamily'); ?>;
    	font-size:<?php tiga_getValue('blogNameFontSize'); ?>;
    	font-weight:<?php tiga_getValue('blogNameFontWeight'); ?>;
    	text-decoration:none;
    	background-color:transparent;
    }
    
    .blog-description {
    	color:<?php tiga_getValue('blogDescriptionColor'); ?>;
    	font-family:<?php tiga_getValue('blogDescriptionFontFamily'); ?>;
    	font-size:<?php tiga_getValue('blogDescriptionFontSize'); ?>;
    	font-weight:<?php tiga_getValue('blogDescriptionFontWeight'); ?>;
    	margin:0px;
    	padding-left:5px;
    }
    PHP:

     
    MrMarco, Feb 28, 2007 IP
  2. mcfox

    mcfox Wind Maker

    Messages:
    7,526
    Likes Received:
    716
    Best Answers:
    0
    Trophy Points:
    360
    #2
    You need to change the image in the theme you are using. Here's the code from your site:
    If you locate the folder containing the theme you are using (tiga-06) and replace the header-bg image with your new one, it should work fine if it's the same size of image.
     
    mcfox, Feb 28, 2007 IP
  3. MrMarco

    MrMarco Active Member

    Messages:
    140
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    53
    #3
    Mcfox - Thanks! I was making it way more complicated than it need to be I guess. I was hoping to keep the name of the image with a strong keyword for the site. I suppose that would mean changing a lot of different things...

    Thanx again~
     
    MrMarco, Feb 28, 2007 IP
  4. mcfox

    mcfox Wind Maker

    Messages:
    7,526
    Likes Received:
    716
    Best Answers:
    0
    Trophy Points:
    360
    #4
    No problem. Use alt and title attributes to give the image some meaning to the SE's ;)
    http://www.netmechanic.com/news/vol6/html_no1.htm

    You would use these in the source code of the page (header.php, probably - if memory serves)
     
    mcfox, Feb 28, 2007 IP