I am a hobbyist webdesigner, use html and CSS for testing various website designs. However one particular thing that always confuse me is the decision to make use of image as tag or to use it as background via css or html. Is their any rule of thumb for this ?

• css
• html5

As one of the answers pointed out, you need to make the difference between content and actual page style.

Let me elaborate on that. The purpose of the background-image property is used to define the look of a certain block of your page, be it a div or a p, the key point to take home is that you're defining the page's look. And images in the context of defining the page's design (be that patterns, logos, gradients etc.) should almost never take the explicit form of an img tag. That tag is used to define content images, something linked to the news at hand - something that is unique to a story you're trying to portray.

It's very crucial to differentiate these two concepts because it'll allow you to contemplate a good design independent of the underlying content - as it should be. Uniformal, elegant and precise.

So, in review. Use background-image to define the look of the various blocks that comprise your website and use the classic img tag when you want to add visual content that is context-specific.

The question is it Content or Styling is a good place to draw the line on images.

Will this image be reused? etc.

Do you want the image be part of the document flow, give descriptions to the search engines (alt-text)? Use the img tag.

If you want to place other elements over the image (like text, copyright info), use a background image. You can even combine it by placing an image with transparency over the background image to get some effect.

Furthermore a lot of examples exist where the positioning of background images is used to get performance benefits ("sprites").