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. 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.{
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);
}