Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Arshdeep Singh
PLUS
Arshdeep Singh
Courses Plus Student 8,349 Points
Posted by Arshdeep Singh
Arshdeep Singh
Courses Plus Student 8,349 Points

Use Website Logo as Img tag or Css Background

Hello,

I would like to know what is the best practice when using logo for the website. Its is better to use image tag or use it as CSS background.

Thanks

1 Answer

Ali M Malik
Ali M Malik
33,293 Points
Ali M Malik
Ali M Malik
33,293 Points

In my opinion css background images work best for several reasons. The first being accessibility where it is better to add the image to the background of a div so screen readers don't have difficulty dealing with it. Also background images don't print by default which is good to make your site print friendly without adding a separate style sheet. The second being performance where you can create a sprite of all your images and add them all using one http request. The third is being able to set the background-image-size to cover and that only works with background images. Finally, if you have repeating images on several pages, you can change the background-image in all of them by changing one link in the css. The only issue with background-image is the lack on an alt tag which isn't very practical.

That said here are the instances I would include an image tag instead of a background-images:

  1. If it's part of the content. If the images is attached to an article and it is a piece of information not part of the design.
  2. Logo images. Usually with logo images you want them to print by default. Also this indexes the logo in search engines in the image results.
  3. When you want screen readers to read the alt tag. If you are adding a warning icon you want the screen reader to prompt the user.
  4. When it's important for SEO.

Hope this helps.