Image in wordpress header breaks when on other pages

Question

Hello,

I have a very strange issue, that I'm hoping someone here can help me with. I have an RSS icon in my wordpress header.php and it works perfectly fine when on the front page but when you visit another page such as, the About page, the image is broken.

I'm not entirely sure what the issue is as I don't have a ton of experience in this field, so I'll do my best to provide as much detail as possible.

Here's the website in which the issue can be seen.

Here is the code in the header.php:

<<div class="rss"><a href="<?php bloginfo('rss2_url'); ?>" title="RSS"><img src="images/rss.png"style="border-style: none"></a></div>

And here is the RSS related code found in the style.css:

.rss {
position:absolute;
height:24px;
padding-right:10px;
line-height:32px;
top:56px;
right:0;
border:0;

}


.rss a {
    color:#000;
    text-decoration:none;
}

I greatly apologize if the provided information is not sufficient, I searched the .php and .css files using the wordpress editor for the code I found relevant to this issue. I do not know much CSS or HTML and the little I do know has left me positively stumped as to what the issue is.

Thanks for reading and I hope one of you can provide a solution.

Answer 1

That is very odd indeed. I believe putting the full image path in should solve it.

i.e. change

<img style="border-style: none;" src="/images/rss.png">

to:

<img style="border-style: none;" src="<?php echo get_bloginfo('template_directory') ?>/images/rss.png">

or if it is a sub-theme:

<img style="border-style: none;" src="<?php echo get_bloginfo('stylesheet_directory') ?>/images/rss.png">

or if you don't want to use php just put in the full path. I noticed just adding a "/" in front of images makes the icon appear in firebug.