How to insert background image on HTML Tag using css?

Question

This question might be silly to you but It's the reason why I asked is because I always see the source code of some big commercial website having this tag for example and I'm wondering why:

<a href="https://www.mywebsite.com" title="" target="_blank"></a>

and it displays images or icons I guess. So I'm curious and I want to know how to insert an image on html i tag with css.

So where did you see this? Why didn't you inspect the element in question and see how it has been done. Putting a background on an i tag is nothing different than any other tag. — putvande
– putvande, Commented Jun 17, 2015 at 8:30
Wouldn't that be just background-image property for myclass? — JanT
– JanT, Commented Jun 17, 2015 at 8:31
Just for experimental purposes I tried something like this <a></a> but it's not showing anything.Any thoughts?Thanks — timmack
– timmack, Commented Jun 17, 2015 at 8:35
Well, is the path to the image correct? Also, have you specified height and width on the i-tag? — Rasmus
– Rasmus, Commented Jun 17, 2015 at 8:42
i is displayed by default as inline: you must set it as display: inline-block for example or width and height won't have any effect. Or have enough content in it but that's not how this sort of element is (ab)used when it isn't used for displaying a text as italic — FelipeAls
– FelipeAls, Commented Jun 17, 2015 at 8:48

Community · Accepted Answer · 2017-05-23 12:08:59Z

4

You set the background image on an i element the same way that you set it on any other element:

Use the background-image property
Ensure the element has an area to display the background on (either with explicit dimensions (remembering that it is display: inline by default so height and width won't apply unless you change that) or content to give it implicit dimensions).

Such:

i {
    display: inline-block;
    height: 200px;
    width: 200px;
    background-image: url(/foo/bar/baz.jpeg);
}

… but don't use an  element for this. Write semantic markup instead.

Use a  if you want an inline element that doesn't come with incorrect semantics.

Use an <img> (with an alt attribute) and not a background at all if you are conveying information with the image.

edited May 23, 2017 at 12:08

CommunityBot

11 silver badge

answered Jun 17, 2015 at 8:51

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

timmack Over a year ago

Yes, you're right. I was just wondering why they use the i tag instead of span or img that is why I asked. Just for a curiosity reason. Thanks again.

Collectives™ on Stack Overflow

How to insert background image on HTML <i> Tag using css?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related