Question

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 ?

Answer 1

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.