Add images within your header image

This technique is very similar to this one but it allows you to add as many images you want and precisely place them within your header image.  Take a look at this very simple screenshot of my header image….

The circle and square represent any custom images that you want to place anywhere inside your header image.  You can move them anywhere inside the header image with the following technique….

In your custom_functions.php file add this code. You can put it anywhere you want but I recommend putting it at the top after the <?php tag. Always describe the function and put it between the comment tags /*  */ at the beginning shown below in green. The comments aren’t shown on your rendered page and it just makes things easier for you to remember…

/*images inside of my header*/
function my_header() { ?>
<div id =”headerimage” ><img src=”<?php bloginfo(’template_directory’) ?>/custom/images/headerimage.jpg” alt=”clickable header” />
<ul>
<li class=”square” ><img src=”<?php bloginfo(’template_directory’) ?>/custom/images/square.jpg” alt=”square” /></li>
<li class=”circle” ><img src=”<?php bloginfo(’template_directory’) ?>/custom/images/circle.png” alt=”circle” /> </li>
</ul>
</div>
<?php }
add_action (’thesis_hook_header‘, ‘my_header‘);

Note the following:

Name your function whatever you want. I named it my_header just to make it easy

The <?php bloginfo is just a block of code that makes it easier to follow the path to your images instead of typing out the entire path.

I divided my images into separate classes which makes it easy to style with css. You can name them anything you want but use names that make it easy to identifying what you are styling

I’m hanging the function on the header hook

In your custom.ss file add the following code. You can put it anywhere you want but I recommend putting it at the top. Always describe what you’re doing by putting your descripton between the comment tags /*  */ at the beginning shown below in green. The comments aren’t shown on your rendered page and it just makes things easier for you to remember…

/*positioning images in my header*/
.custom #headerimage {
position: relative;
width: 920px;
height: 300px;
}
.custom #headerimage ul {
list-style: none;
margin: 0;
padding: 0;
}
.custom #headerimage .square{
position: absolute;
bottom: 5em;
left: 10em;
}
.custom #headerimage .circle{
position: absolute;
bottom: 15em;
right: 5em;
}

If you want to understand why you style these like I did check out this tutorial where it’s explained in detail.  Basically I’m doing the same technique where I’m assigning the header to a relative position.  Then I assign the images to an absolute position where I can precisely place them by choosing my distances from the top, bottom, right, and left of the header edges.

Tagged as: adding images into your header, function, header, images