Usually, if images have been uploaded and the stylesheet or theme has been edited, but the images don’t appear, it’s a path problem. What do I mean by a path problem? This is when the images are not in the sub-directory that the browser is told to look. Also, you may want to use a .jpg image instead of .png if you are using Internet Explorer (IE) for your browser. While the newer versions of IE supposedly support the .png format, I have had a number of people report problems, particularly with the older versions.

However, let’s take a quick gander at your path issue.

Step 1
First, you didn’t mention what theme you are using. Different themes use different approaches to customizing stylesheets. Some do everything in the style.css. Others use a base stylesheet and them make a call to a customized stylesheet. And then some have a basic stylesheet and then modify the header.php file in the section to add customized styling. For example, Magicblue specifies the background images in the header.php file instead of style.css. Alas, there is no consistent way to handle styling. So the first thing you need to do is identify exactly what code needs changing. The easiest way to do this is make a clear change. For example, if the stylesheet has something like this:

body{
background: #fff url("/images/bodybg.gif");
}


try removing the url("/images/bodybg.gif") and changing the #fff to read #f00 (this should make the background bright red). If you see the changes where you expect them, then you have identified the style you need to change.

Step 2

Now, you need to make certain that the path to the image is the directory where the image actually is. Did you notice the code that read url("? This is code for the theme path — the path to the theme directory that is specified as the active theme in the Wordpress Administration. This is usually the best way to specify the first part of the path because it means you don’t have to do a lot of code changes every time you want to change the background image.

The second part of the path in my example is the part that reads /images/bodybg.gif". This tells the browser that the image bodybg.gif is located in the images directory inside the theme directory. You may need to add the Unix relative path code: ../, so that the full path will read: url('../images/bodybg.gif'). This is one of the first things to try if your image is in a sub-directory inside your theme directory.

If you don't use this code, you have specify exactly the full path to the image. If I were to write out the full path to the bodybg.gif image in the Magicblue theme for my website it would read: url("http://carolynecooper/wp-content/themes/magicblue/images/bodybg.gif"). Ouch! Way too much work.

The Lazy Person's Solution

I am much too lazy to make all those changes in my stylesheet, so if I all I want to do is swap one background image for another, I do this:

1. Identify exactly which image I want to change. In my example, I want to change "bodybg.gif".
2. Make my new image the exact same size and, ideally, the exact same format, as bodybg.gif.
3. In my Magicblue Theme /images directory, I make a copy of bodybg.gif (usually by simply re-naming it something like original-bodybg.gif).
4. Upload my new image into the same Magicblue Theme /images directory and name it bodybg.gif.

This way I don't have to change any of the code. I just have to rename the original image and upload my new image.

Slight More Complex Solution

1. Identify the image that you want to change.
2. Make my new image the exact same size and whatever format I need (usually ,jpg or .gif until all of the browsers catch up to .png).
3. Upload my new image (let's call it new-bodybg.jpg) in the same directory as the current image (in my example case, the Magicblue /images directory where bodybg.gif resides).
4. Change the stylesheet code so that instead of url("/images/bodybg.gif"), it reads url("/images/new-bodybg.jpg").

Double check the name. It's case-sensitive and file format sensitive so everything must match exactly.

I hope that helped. If you are still having a problem, please include the stylesheet or template code that you are trying to change as well as the full path of your new image.

And thank you for visiting the site.

the file that the image is in ends in (.png) not (.jpeg)

Help!!!! I’m lost

I hope that helps and don’t hesitate to ask if you need more help.

Thanks for you very helpful tips and informative answers to questions. I am in the very early stages of building my WordPress blog and with your help I was successful in replacing the default header with my own. The problem I now face is that my new header contains my blog title, so I want to hide the default blog title and tag line from display. (they now overlap) Is there a “coding” way to do that other than blanking them out in my general settings?

Your advice would be most helpful

Thank you
Warren

Thanks for reading and writing. Hmmm, if you are deleting the file named “masthead.jpg” in yourdomainname/wp-content/themes/the-name-of-your-theme/images/ , you should be getting rid of the image in your <div id="masthead"> section. There are a couple of possibilities and a test you can run.

The hard code way to solve the problem is to remove the background url call entirely. You can do this by either deleting the line from the CSS tag or you can test it by commenting it. To comment out a line of code in CSS, you want to wrap it in /* and */ like this:

#masthead {
position: relative;
top: 0px;
/* background: url(’images/masthead.jpg’); now this line of code will be ignored */
width: 700px;
height: 225px;
margin: 0px;
margin-top: 0px;
}

Or, as I said, you can simply delete that line from your CSS. If you do that and you still see your background image, it means one of 2 things:

1. The first thing to check is to make absolutely certain you are changing the correct theme and the correct style sheet. (Some themes have more than 1 style sheet and the last style sheet loaded tops the first one. I have run across a couple of themes where they load or add custom styling after linking the standard style.css.) I’ve done this. I’ve worked hard at editing a theme and got very frustrated when my changes didn’t appear to have any affect on the browser display and then discovered I had been working on the wrong style sheet.

2. If you are working on the correct style sheet, then it means that the page has been cached. If you have installed and activated the plugin WP Super Cache you won’t see any changes to your theme. I had a student do this in my last class on essential Wordpress SEO. We had been learning how to add new plugins and discussing using WP Super Cache if you ran into a load speed problem with your site — so naturally, she’d installed it while we were looking at other plugins. Since the next thing we looked at was editing our style sheets in the Wordpress Theme Editor, it caused a small problem. The problem was solved when she deactivated WP Super Cache, cleared her browser cache and re-loaded the page.

So remove the background line in the correct css, make certain you have cleared your browser cache and then reload the page.

A great way to troubleshoot whether you are working on the wrong style sheet or have a cached page problem, is to change the color of you css body tag to something like color: #ff0000; — which will make all of your standard text red — and add some new text to your index.php or footer.php template like “IF YOU CAN READ THIS THEN THE PAGE IS NOT CACHED!”

I hope this helps solve your problem and thanks again for visiting, Mike!

I loved your post and attempted to do everything as you layed out for changing the image when it is a CSS tag. However, after doing it all like you posted, it still did not work. Here is what the style.css code shows:

#masthead {
position: relative;
top: 0px;
background: url(‘images/masthead.jpg’);
width: 700px;
height: 225px;
margin: 0px;
margin-top: 0px;
}

I found that I could actually delete the file called “masthead.jpg” altogether from the images folder within the theme (via ftp folder) … but that didn’t change it either. This leaves me to believe that it is somehow pulling the image from a different url than what the code shows above. Could that be possible?

Thanks!
Mike

Thanks for the kinds words. There are several ways of replacing a single image with multiple images depending upon the actual header.php layout and code. The easiest is to wrap the images in a tag that defines in the CSS code the length, margins, padding, borders and so forth for the space in which the images are being placed and then placing multiple images. For example,


< div id="header">
<img src="image1" alt="" /><img src="image2" alt="" /><img src="image3" alt="" /><img src="image4" alt="" />
< div id="header"/>


You might choose to specify the width of each image to speed up loading but make certain the total widths add up to nothing larger than the maximum width of your current image.

The CSS might look something like this:
#header {
width: 760px;
height: 151 px;
padding: 0;
}

#header img {
margin: 0;
padding: 0;
border: none;
}

I took a look at your current site and did find a problem with your HTML, however. Your header tag includes the closing tag attribute. It shouldn’t do this. Basically, you are opening and closing your header division with nothing in between. This is treating it like a singleton tag. A singleton tag is an HTML tag that opens and closes in a single line. Very few tags should do this. The two most common are the break tag <br /> and the image tag <img />.

Right now the code looks like this:


< div id="header"/>
<img id="frontphoto" height="151" width="760" alt="" src="http://youngandfoodish.com/wp-content/themes/wp-andreas01/img/finn.jpg"/>


It should look like this:

< div id="header">
<img id="frontphoto" height="151" width="760" alt="" src="http://youngandfoodish.com/wp-content/themes/wp-andreas01/img/finn.jpg"/>
< div id="header"/>