Every home page “Feature Box” where I used the WordPress logo has a faint icon behind it. It’s not from the WordPress logo; it’s from the Kahuna theme.
When I downloaded a copy of the WordPress logo, I took a transparent version. That is only the logo itself shows. And, I added it as a WordPress “featured image” to all my posts about using WordPress (see screenshot). When I remove the featured image, the default icon shows (see screenshot).
How did the overlap happen? This is a bug. That is, it picks up a Featured Image if there is one, but the featured image does not replace the default image.
Two ways to show an image on a web page?

Debugging requires an understanding of what can go wrong. Like a doctor trying to diagnose an illness, a developer has to go through the possible problems. The first piece of knowledge I pull out of my head is that there are two ways to add an image to a website, 1) insert the image, 2) set the image as a background.

When you insert an image, there is an image tag: <img src=”addressof image”>. The image becomes a page element. When you set an image as a background, the image is a rule of a layer: background: url(addressof image);.

Is one image here an inserted image and the other a background image? This is where we can take a look at the code and find out! By using the Firefox Inspector, I can look at the code that is delivered to the browser from the server. And, it turns out that the two old HTML/CSS methods have been added to!

The basic layers that create the image for this Feature Box are:

<div class="lp-box-image lpbox-rnd8">
  <a class="lp-box-imagelink"  href="https://montanawebmaster.com/2018/07/27/now-how-did-that-happen-debugging-your-website/" >
    <span class="screen-reader-text"> Now, How Did That Happen? Debugging your Website</span>
  </a>
  <img alt="Now, How Did That Happen? Debugging your Website" src="https://montanawebmaster.com/wp-content/uploads/2018/07/FeaturedImageOverlay-331x200.png" />                         
  <span class="box-overlay"></span>
</div>
This code is from View – Page Source in the browser. The Firefox Inspector gives a bigger picture of the layers. There are two interesting factors in this implementation: 1) the image is in ::before, 2) the camera image comes from a font, not an image file at all.
 .lp-box-image::before
{
content: “\e92d”;
position: absolute;
z-index: 2;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100px;
height: 100px;
margin: auto;
font-family: ‘iconmeta’;
font-size: 100px;
line-height: 1;
color: rgba(0, 0, 0, .15);
}
So, the camera is a character in a symbol font set called Glyphicons, and is set in a pseudo-class. Ideally, when there is a Featured Image, the CSS would change, but it doesn’t. Normally it wouldn’t matter, but I used a transparent image, so the weakness is made apparent.

Leave a Reply

Your email address will not be published. Required fields are marked *