Problems with img src and template pages Wordpress - wordpress

Question

I am building a Wordpress website from HTML/CSS/JS templates i made earlier. However this is my first time using it and im really struggling. There are plenty of resources and solutions however none seem to be working for me, for example; one tutorial pointed out you could create template pages if you go into your management screen > pages > add new > page attributes > template. But under page attributes is only "order" although it does claim there should be a template bit if you click help.
I've managed to link my stylesheet but none of my images are appearing. They are all in a folder named images within my theme directory.
In my external stylesheet i have:
body{
background:url("images/subfolder/image01.jpg");
}
I have also tried:
body{
background-image:url("images/subfolder/image.jpg");
}
In my html I have:
<img src="<?php echo get_template_directory_uri(); ?>/images/subfolder/image02.png" alt="DESCRIPTION" />
I have also tried:
<img src="<?php bloginfo('template_directory'); ?>/images/subfolder/image02.png" alt="DESCRIPTION" />
I can't seem to get any of these up.

Answer 1

Here is the deal:) Your folder structure "must" look like this
-Yourtheme Folder
index.php
style.css
page.php
single.php
...other files
-images (images folder)
-js (js folder)
So if you are developing a theme full image path will not help you much because you simply don't know how will your clients domain look, like it can be http://www.mydomain.com/somefolder/ but it can also be http://www.mydomain.com/somefolder/subfolder/anothersubfolder so to access your images use relative paths like this:background-image:url('../images/myimage.jpg'); that way images will work no matter how your domain path will look.
Now to templates:)
In order to wordpress recognize that you are having a template create a file and name it mycooltemplate.php (you can name it however you want)
Your first line inside your template file must read something like this:
<?php /*Template name: This is my cool template*/
?>
That way wordpress will know that you are using a template and you can access it inside
management screen > pages > add new > page attributes > template
So to give a real world example let's create our first template shall we?
We will now create an simple archive template.
Open your text editor and add this code
<?php
/*
Template Name: My Cool Archives Template
*/
get_header(); ?>
<div id="container">
<div id="content" role="main">
<?php the_post(); ?>
<h1 class="entry-title"><?php the_title(); ?></h1>
<?php get_search_form(); ?>
<h2>Archives by Month:</h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
<h2>Archives by Subject:</h2>
<ul>
<?php wp_list_categories(); ?>
</ul>
</div><!-- #content -->
</div><!-- #container -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Save it as archives.php (name it however you want) and upload it to your theme folder. So now your folders should look like this:
-Yourtheme Folder
index.php
style.css
page.php
single.php
archives.php (your first template yeeey!!)
...other files
-images (images folder)
-js (js folder)
Hope this helps...

Answer 2

Try specifying the full path to the themes directory from your web root.
eg. /wp-content/themes/[yourtheme]/images/subfolder/image01.jpg

Answer 3

The image paths should work in your CSS but in your HTML/PHP you will need to use something like
<img src="<?php bloginfo('stylesheet_directory'); ?> /images/subfolder/image02.png" />