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 to change some css Properties according to text length

    HTML to PDF (by javascript) how can I add css or table?

    In SASS, how to avoid space before interpolation when creating a selector?

    How to achieve this gradient using valid HTML & CSS only

    iPhone iOS how to send an HTML email with CSS styling?

    How to make a button CSS change only IF form fields are valid

    Show warnings screen resolution

    Show and Hide option for DIV(needs modification)

    How to re-size inputs for a <%= form_for %> form in Ruby on Rails

    How to Inherit grandparent CSS not parent?

    how to keep my slider horizontally centered?

    How to add padding between options in select input?

    How to make text svg-animation launch when visible?

    How to access files from this hierarchy?

    How design an unordered list of images horizontally with Bootstrap?

    how to stop CSS animation without javascript

    css animation how to get the ball to bounce

    Is it possible to compress LESS CSS files with htaccess? (and how to?)

    How to make a CSS shape with rounded and straight edges?

    How to style a particular paragraph element in css without effecting the other paragraphs in the same class?

    how to use css align control one row

    The tops of these links aren't working, how can I get the link inside just the buttons?

    how to encrypt css/js filename

    How to create a 1px height div in IE8

    How to make a div snap to min or max size, without any sizes in-between?

    How to fix each column in Table? [closed]

    How to make divs float on both ends of another div?

    How to color my sidebars after centering my website

    How to add a centered div that fades-in from the top over my content?

    How to make css jquery autofit navigation?