0

Why do some websites use the background-image: url('') CSS rule for their logo that is in the fixed header instead of the <img> tag?

I was going through the code for the music websites: Shazam and Deezer and realized something that amazed me but that also worried me...

Example 1: (This is the code from Shazam's website)

<a class="header-logo" href="https://www.shazam.com/" data-shz-beacon="providerdesc=home-logo" style="background-image: url(&quot;/resources/a935eea48a74b098f4b697dccd8c5322e30f48cc/logos/logo.png&quot;);"></a>

^In this case, they added an <a> tag and then added an inline-style with the background-image: url('') CSS rule, instead of adding an <img> tag.

Example 2: (This is the code from Deezer's website)

HTML

<h1>
<span class="index-header-logo logo logo-deezer-hp"></span>
<span class="sr-only" lang="en">Deezer</span>
</h1>

CSS

.logo-deezer-hp {
background-image: url(/cache/images/common/logos/deezer_hp.51c8087603572ee440e73719f69ff50d.png);
height: 40px;
width: 185px;}

^In this case they added a <span> tag inside a <h1> tag, gave a class to the first span tag and then through CSS they added the background-image: url('') CSS rule.

So i asked myself:

1- Why did Shazam and Deezer not use the <img> tag to add their logo? 2- Why did Shazam not use the <img> tag inside the <a> tag? 3- Why did Deezer use the <h1> and <span> tag to add their logo?

I researched a lot about this but still can't understand why they did not use the <img> tag for their logo...

My question is...

"I use the <img> tag to put my logo inside the fixed header for my website, why did Shazam and Deezer not use that tag? How/Why did they decide to use the background-image: url('') CSS rule instead?

Every other website uses the <img> tag, why did they not?!?!

I really need to know why both of these websites decided that it was better to use background-image: url('') ...

Adagio MsmDataHub
  • 21
  • 3

1 Answers1

0

As far as I can see in the shazams's website, they used tag to give their logo a link that when you clicked the logo it will redirect you to their home page, some websites uses a logo and a separate Home button for their site for me I can see that they used tag that serves as a button and instead of text, they used an image or simply their logo for a much effective user experience.

About Deezer, they used tags to have both, I say when creating / designing your own website its all about creativity, and you're all free to use every element of HTML has to offer.

Conclusion, for me I use tag for a much responsive image / logo display (especially in working bootstrap components), while having it in the "background-image", it will be much easier to implement it to other elements you have in your website, let's say you'll be putting it in a class and just give it to an element whenever you want to display the image you've used.

Jhek
  • 1
  • 1