How to insert background image on HTML Tag using css?


Tags: html,css

Problem :

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"><i class="myclass" id="myId"></i></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.



Solution :

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

  1. Use the background-image property
  2. 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 <i> element for this. Write semantic markup instead.

Use a <span> 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.


    CSS Howto..

    How can I count CSS page breaks for printed HTML?

    How to create rounded shapes with css or SVG

    How can you have your websites resolution change according to the users screen resolution?

    How to create hover effects for all links EXCEPT the one you hover on using javascript/jquery/css?

    How to auto adjust (stretch) div height and width using jQuery or CSS

    How to set link on image using maplink in responsive theme?

    How to dynamically modify