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).
- Log in to your WordPress site and go to the Microthemer workspace.
- Double-click an image you want to replace.
- Create a selector to target the image by giving it a descriptive name, and then save it in a folder.
- Click on the Dimensions icon in the top menu bar.
- 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.
- Staying in the same styling group, set the box-sizing option to border-box.
- 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.
- Click on the background style group and then click the image insert button to upload and insert a new image to replace the original.
- 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