CODEWITHSUNDEEP
cssimagebackground-imagehttprequest
Brett
Brett

Reputation: 20049

Any benefit to loading a single image via background with CSS?

Ok, obviously if you have a lot if icons you generally load them in via a background image so you can utilise sprites; however, I was just wondering if there is any advantage to loading them in via the background versus loading them via a img tag when it is just a single image?

Does the one in the CSS still make a http request for the image?

Upvotes: 0

Views: 39

Answers (2)

henry
henry

Reputation: 4385

Sounds like you're mostly interested in how this affects performance. But since the question is open-ended here are other reasons, for completeness:

  • If you need to calculate the image's height based on its width (a common responsive design method is width: [something > 0]; height: 0; padding-bottom: [some]% )
  • If you need to use CSS to swap out the image (basic icon example: if the image changes on :hover and you aren't using a sprite, for any number of reasons)
  • If you need to be able to use CSS background options like background-size or background-position (IE > 8)
  • If you need to have HTML on top of your image without adding an additional element
  • If you need to use pseudoelements like :before and :after, which are not supported for <img> (not required to be supported, anyway)

Upvotes: 2

Jayx
Jayx

Reputation: 3966

Yes, it still makes a request, unless you URL encode the image, but this you can also do inline and is not necessarily more performant.

Upvotes: 1

Related Questions