Fun fact with <a> and <span> tags

[pwired]

 

I just wonder for how many of you this isn't any surprise ?

I didn't know any better than that back-ground images are only used with <div> tags.
But today I bumped into a html template where I saw highly surprised that both a <a> and a <span> tag
where css configured with a background-image

.info a {
    background: url(../images/msg-icon.png)1px 2px no-repeat;
}

.info span {
    background: url(../images/c-icon.png) 0px 0px no-repeat;
}

Doing so the content inside the <a> tag has an email icon on the left
and the <span> tag a mobile phone icon on the left.

To be honest I never saw this before in websites, tutorials, the forum, etc.
so I guess this is a case where one out of habit uses css in a limited way

 

 

[kongondo]

6 minutes ago, pwired said:

I just wonder for how many of you this isn't any surprise ?

No surprise here..

6 minutes ago, pwired said:

I didn't know any better than that back-ground images are only used with <div> tags.

 

6 minutes ago, pwired said:

I saw highly surprised that both a <a> and a <span> tag
where css configured with a background-image

I guess I am from the old school. A 'long time' ago, logos used to be background images set on anchors (<a> tags). Menu items (<a> tags) used to have background images called sprites that would 'shift' on hover to create a nice hover effect...

[louisstephens]

Yeah, I remember making logos for a tags using:

<h1><a href="/">COmpany Name</a></h1>


a.logo {
	width: 350px;
	height: 75px;
	text-indent: -9999px;
	background: url(logo.png) no-repeat left top;
}

I never used many backgrounds with spans however. 

[dragan]

51 minutes ago, pwired said:

I didn't know any better than that back-ground images are only used with <div> tags.

ahem... not sure if serious? 

OTOH, I just recently found out about the :empty pseudo-selector, which would have helped me to avoid some stupid workarounds or hacks in some situations...

https://developer.mozilla.org/en-US/docs/Web/CSS/:empty

 

[wbmnfktr]

I use (and love) background images a lot on all kinds of whatever... even in :pseudo elements like :empty, :before/:after.
Combined with things like aspect-ratio you can do some really nice things there. 

Yet another thing to mention: Multiple background images 

More about aspect ratio boxes: 
https://css-tricks.com/aspect-ratio-boxes/

[OLSA]

If someone is interested, here is example how to automatically assign icon to file depends on file type.
No images or empty HTML tags "<i class="fa..."></i>", only CSS pseudo elements.

Link to Codepen

Regards.

 

 

 

[wbmnfktr]

Extend that solution with a check for facebook.com / twitter.com / whatever.tld and you can apply social icons as well.