Replace An Existing HTML Image (e.g. A Logo) With A Background Image

Logos can be tricky to change purely with CSS if they have been set using an HTML image (rather than a background image). But surprisingly, there is a way to replace an existing HTML image with another image using Microthemer (CSS).

1. Log in to your WordPress site and go to the Microthemer workspace.
2. Double-click an image you want to replace.
3. Create a selector to target the image by giving it a descriptive name, and then save it in a folder.
4. Click on the  Dimensions icon in the top menu bar.
5. You will see the current width and height values in light grey. Manually enter the same   width and   height values as what is shown in grey (they need to be set explicitly). Make a note of the   width property.
6. Staying in the same styling group, set the  box-sizing option to border-box.
7. Click on the  padding and margin style group and set the left-padding value to exactly the same as the width you just typed in the width field. The existing HTML image should now disappear.
8. Click on the  background style group and then click the image insert button to upload and insert a new image to replace the original.
9. You may want to also use other background-image options such as position, repeat and attachment, size and clip.

Using this technique for rollover images

This method could also be used to create an image rollover effect that would traditionally be achieved with JavaScript. You would need to create a selector that targets the image in the hover state. Any element can be targeted in the hover state by adding :hover to the end of the CSS selector code. Applying the above styles to the hover selector would replace a regular HTML image with a CSS background image when the user hovers their mouse over the image.