image best practices

[scottastrophic]

I have heard that’s it generally considered a best practice to make an image the background-image of a span or div rather than directly using an img tag in the markup… I am curious as to whether this is true, and if so, why, what advantages this provides. Any insight one way or the other would be welcomed. I am new to the forum, I hope people are friendly!

Thank you.

[chrisburton]

Dynamic structuring, I guess. But it really depends on the situation. It’s more efficient to use CSS than to change a single piece of code in multiple HTML files.

[TheDoc]

That would be true if it’s a background image, but not if the image is part of your content.

[scottastrophic]

My use case (at the moment) is a jQuery sortable ol; triangles will fade in at the top left and bottom left on hover of an li, which when clicked will insert a new li above or below the current one. The triangles are the image in question. Definitely not the content. The plan is to use the jQuery UI position plugin to get the triangles where they need to go. Does this seem like a bad idea? Should the triangles be part of each li itself, positioned, rather than reusing and reposition the same instances?

[joshuanhibbert]

HTML is for content, CSS is for styling. For instance, an avatar image is content, so you should use the img element, whereas a background image is style and as such should be done using CSS. As long as you keep that in mind you should be fine.

[Author]

Posts