I understand that CSS fetch images relative to it's own location but how do I do this the same way for within Wordpress theme?
Scenario: I have a search box right of my header. The search box came with the Twentyeleven Wordpress theme and has the following css:
background: url(images/Search-Button.jpg) no-repeat;
It renders out the background image located in the images folder inside the themes folder. it found the image here:
C:\wamp\www\wordpress\wp-content\themes\twentyeleven\images\Search-Button.jpg
Now, I wanted to add a logo somewhere beside it so I added this to the theme's header.php:
<div id="Title_logo">
<img src="images/Logo.png" />
</div>
but it doesn't render the image successfully because it is not looking for the image at "...\wp-content\themes\twentyeleven\images\Logo.png" (same directory as Search-Button.jpg).
instead the result image src was: C:\wamp\www\images\Logo.png
and reported that the image was not found.
How did the background image work?
or can somebody at least show me the proper way, and explain why this is not working?
I'd like it to work even when I rename the theme folder.
You do have to do it like this;
<div id="Title_logo">
<img src="<?php echo get_template_directory_uri(); ?>/images/Logo.png" />
</div>
Then it will also work if you install your theme on another server. See: http://codex.wordpress.org/Function_Reference/get_template_directory_uri#bodyContent
The way you did it in you example (src="images/Logo.png") points the browser to your root folder, because the whole Wordpress cms is build from the index.php in your root folder.
So you have to tell your browser (via php) that the image is in the images directory in the theme-directory.
The css file is also loaded that way, but calls his referrals to related files from the place where it exists. (the theme-directory). So in css you can refer to your files like you normally should, but from the theme-docs (php) you have to use the special Wordpress functions in your paths, hence the function: get_template_directory_uri();