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>
color: rgba(0, 0, 0, .15);