set up img in the header of my website

Question

I'm building a web site and I'm using HTML5. I'd insert into my header an img that is my company's logo. In terms of efficient and correctness it is better set up css propriety as background-image: url("logo.gif") in my css style or including in the html file

<header>
   <img src="logo.gif" alt="logo" />
</header>

Answer 1

It is best to include the image as an img tag, not a background-image.

This means that if the client has disabled CSS on their browser, or it doesn't support CSS, they will still be able to see the logo at the top of the page.

---

This would also mean you could make the logo a link to the home page, which has become a general usability point for websites these days:

<header>
   <a href="/index.html"><img src="logo.gif" alt="logo" /></a>
</header>

For more information on this sort of situation, see this popular StackOverflow post:

When to use IMG vs. CSS background-image?

Answer 2

that depends.

If your logo should be clickable then include it in the HMTL. (usebility)

If it is only present for design purposes go with the CSS.

It is generally a better idea to define everything related to the appearance of the Website in the CSS.

html:

<header>
     <div id="company_logo"></div>
</header>

css:

#company_logo{
width:50px;
height:50px;
background-image:url();
}