When to use IMG vs CSS background-image

0 votes
When should you use an HTML IMG tag instead of a CSS background-image to display an image, and when should you use a CSS background-image instead of an HTML IMG tag?

Accessibility, browser support, dynamic content, and any technical limitations or usability principles are all possible factors.
Jun 10 in CSS by Edureka
• 7,940 points
16 views

1 answer to this question.

0 votes

You can transition a div's background image natively:

#some_div {
    background-image:url(image_1.jpg);
    -webkit-transition:background-image 0.5s;
    /* Other vendor-prefixed transition properties */
    transition:background-image 0.5s;
}

#some_div:hover {
    background-image:url(image_2.jpg);
}

This saves any JavaScript or jQuery motion used to fade the src of an img/>.

answered Jun 10 by Edureka
• 8,460 points

Related Questions In CSS

0 votes
0 answers

When to use margin vs padding in CSS ?

Is there a certain rule or guideline ...READ MORE

5 days ago in CSS by Edureka
• 7,940 points
6 views
0 votes
0 answers

CSS gradients vs background Image?

What is the difference between CSS gradients ...READ MORE

6 days ago in CSS by Edureka
• 7,940 points
8 views
0 votes
1 answer

How do I give text or an image a transparent background using CSS?

Use either a semi-transparent PNG or SVG ...READ MORE

answered May 27 in CSS by Edureka
• 8,460 points
24 views
0 votes
1 answer

How to hide image broken Icon using only CSS/HTML?

Because CSS/HTML has no means of knowing ...READ MORE

answered May 31 in CSS by Edureka
• 8,460 points
14 views
0 votes
1 answer

Render HTML to an image

To answer your question, there are a ...READ MORE

answered Feb 8 in Java by Soham
• 8,730 points
293 views
0 votes
1 answer

Background images and SEO Info on it

Use alt text on a transparent image and ...READ MORE

answered Feb 21 in Others by narikkadan
• 10,840 points
72 views
0 votes
0 answers

seo - images and h1

I like to have logos instead of ...READ MORE

Mar 9 in Digital Marketing by Kichu
• 19,040 points
28 views
0 votes
0 answers

When to use IMG vs. CSS background-image?

In what situations is it more appropriate ...READ MORE

Mar 10 in Digital Marketing by Kichu
• 19,040 points
25 views
0 votes
1 answer
0 votes
1 answer

Is there any way to colorize a white PNG image with CSS only?

Filters can be used with -webkit-filter and ...READ MORE

answered May 27 in CSS by Edureka
• 8,460 points
24 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP