CODEWITHSUNDEEP
htmlcssimage
Fahad Sohail
Fahad Sohail

Reputation: 1836

Img as background-image

Can I make the img tag use the background-image properties? Like for example, I have these two pages here one has img and the other one has background-image tag. Notice in responsive version the img one squeezes the image, while the background-image one adjusts the image according to the size.

You can find both img and background-image in sub-header div ..

Upvotes: 0

Views: 190

Answers (1)

JDB
JDB

Reputation: 25820

This'll sound a bit pedantic, but there are a few reasons for it.

An <img> element represents content on the page, something intrinsically important to see and understand. Background images are fluffy stuff to make the site look pretty but their removal would not impact the message.

You are mixing your use-cases. You should go with a background-imaged header in this case because the image isn't intrinsic to the message or content of the page.

Use an <img> element when you're displaying a graph, a photo someone took, etc.

Why?

  • The browser intentionally treats them differently, as you've noticed, placing a higher priority on showing the content of an <img> tag for example. It'll attempt to stretch the image to fit by default, while a background will simply be clipped.

  • When the user goes to print the page, it's much easier to remove background images via CSS media queries then it is to hide (the correct) IMG tags.

  • Background images also don't take up space in the DOM and cause fewer conflicts with other elements. IMG tags flow in the document and can easily get dislodged from their intended position (creating a lot of extra work to make them stay put).

  • Right-clicking a background image doesn't do much. Right-clicking an image gives you image related options, such as downloading or opening the image. This goes along with the theme of the <img> tag as content.

There are other reasons, but this all boils down to semantics. This may not seem like a big deal to you, but that's probably because you don't have a vision impairment (so you don't regularly use a screen reader) and aren't really thinking about web crawlers and the many other systems that attempt to extract meaning from the tags you've used.

You will be far better off for many, many reasons if you stop fighting the system and use it the way it was intended. Or, at least, know why you're bucking convention before doing so.

Upvotes: 3

Related Questions