Welcome to the Treehouse Community
Looking to learn something new?
Arshdeep SinghCourses Plus Student 8,349 Points
Use Website Logo as Img tag or Css Background
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.
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:
- 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.
- 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.
- 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.
- When it's important for SEO.
Hope this helps.