Replacing Image in Child Theme – Will New Image, Same Name Work?

Are you trying to add a background image somewhere?

I’m trying to replace a background image – the grey one used in the horizontal bar towards the bottom of the home page.

The CSS should be as follows

#strip {
 background-image: url(images/newStrip.png);
}

Thanks @andrew – you’ve confirmed that I could easily create a new image (with a new name) and modify the css in my child theme’s style.css to point to it.

But what I’m asking is whether I can simply duplicate the image in my child theme and modify it WITHOUT needing to change any CSS. Do you know if this is possible?

It’s not that I’m worried about modifying CSS – and in this case it’s not much – but it seems the strength of child themes is needing to modify as little as possible, and I’m trying to understand why this isn’t working in this instance… Any ideas?

You don’t need to duplicate the folder, but you can change the original newStrip image where the parent theme references it.

Try clearing your browser (and any other) caches…the old image may well be cached.

@andrew – I don’t want to alter the original image in the parent theme as that kinda negates the idea/efficacy of child themes, doesn’t it? It’ll just get replaced next time I update the parent theme…

@wpyogi – Have tried emptying cache, and am running safari with cache disabled now – still no luck.

Am I missing something about child themes here? I understood that files in the child theme file structure are treated as replacements for their duplicates in the parent theme – does this not apply to images?

Sorry, I didn’t totally understand your question (though clearing the browser cache still goes ?? ) — yes, as Andrew said, you do need to add some CSS code to the child theme stylesheet:

#strip { background-image: url(images/strip-bg.png); }

Just make sure the file name in the above is exactly the same as your image’s name.

Could you explain why? This exact CSS is already in the parent theme’s style.css and my new image’s name is exactly the same as the original parent theme’s image name – strip-bg.png – intentionally, because I thought that would mean the new image simply “replaced” the old one when the child theme was loaded…

The file path from the parent theme stylesheet goes to the old image. When a theme pulls styles from a parent stylesheet, it merely reads the styles – it does not “move” or somehow “copy” those styles to the child theme stylesheet. With CSS it’s all about the “cascade…” and what styles take precedence — which is based on location and specificity.

To finish that a bit better — when the parent stylesheet is read for that background, the file path says “go to the images folder that is right next to this file and find the strip-bg.png image.” So in this case it finds the old one.

Ahhhh … OK. That makes things a lot clearer.
Thanks for taking the time to explain WPyogi ??