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
• 9,940 points
52 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
• 9,540 points

Related Questions In CSS

0 votes
0 answers

CSS gradients vs background Image?

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

Jun 22 in CSS by Edureka
• 9,940 points
14 views
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
• 9,540 points
81 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
• 9,540 points
38 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
• 9,540 points
20 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,740 points
445 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
• 11,280 points
84 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
70 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
34 views
0 votes
1 answer
0 votes
1 answer

When to use margin vs padding in CSS ?

MARGIN vs PADDING : Margin is used in an element to ...READ MORE

answered Jun 28 in CSS by Edureka
• 9,540 points
11 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