2 Replies - 1347 Views - Last Post: 09 November 2009 - 07:55 AM

inline image versus CSS image

Posted 04 November 2009 - 09:05 PM

So I was in my Web Design class tonight, and the teacher posed the question, "in regards to separating Content from presentation, when would you want to use an inline image versus setting it using the background-image property in an external style sheet?"

So obviously, it would be a better option to use CSS for stuff like nav-bars, Logos, and anything else that is used repeatedly through out the site. Even with in article images, you would get more control over formatting with image and it's border and everything else.

so... yeah. When would you want to use an image inline versus a CSS element?

Replies To: inline image versus CSS image

Re: inline image versus CSS image

Posted 04 November 2009 - 10:05 PM

Hello,

Torroes_prime, on 4 Nov, 2009 - 08:05 PM, said:

So I was in my Web Design class tonight, and the teacher posed the question, "in regards to separating Content from presentation, when would you want to use an inline image versus setting it using the background-image property in an external style sheet?"

So obviously, it would be a better option to use CSS for stuff like nav-bars, Logos, and anything else that is used repeatedly through out the site. Even with in article images, you would get more control over formatting with image and it's border and everything else.

so... yeah. When would you want to use an image inline versus a CSS element?

When the image is the content you should use the image tag. If I have a gallery of images a user is free to turn off styling/css or print a page and the images will still show. When it is simply a styling element, background, rounded corners etc... use CSS

Re: inline image versus CSS image

Posted 09 November 2009 - 07:55 AM

jwwicks, on 4 Nov, 2009 - 09:05 PM, said:

Hello,

When the image is the content you should use the image tag. If I have a gallery of images a user is free to turn off styling/css or print a page and the images will still show. When it is simply a styling element, background, rounded corners etc... use CSS

Jw

Agreed. When you disable the CSS, an image defined as a css background element is disabled as well. If it is content, it should be in-line (and always make sure to enter the 'alt' description under the image tag for accessibility purposes).

The only time you'd want to have content-related images as a background image is if you're using one of the various techniques to replace text (headers, etc.) with a decorative alternative. It would keep the users from being able to scale your site and adjust fonts, etc. for the headers that may break your design. The problem is none of the methods work flawlessly, they all have some impact on accessibility/seo/etc. So it should be used sparingly or not at all IMO.