Grow your CSS skills. Land your dream job.

Serving all images as CSS background-image? Good or Bad?

  • # April 26, 2013 at 2:50 am

    I’ve recently started working at a new place and found something interesting about the existing codebase. From what I’ve discovered so far, almost all of the images of the sites, including logo, avatars of users, content images, are served as background-image of div’s, instead of being output in < img>. They do have an ending part to their URL query to specify the size, like
    background-image: url("http://website.com/image.jpg?height=100px");

    And they do seem to use media queries to have different urls of different image dimensions to be linked. However, I am feeling very uncomfortable about this idea, because these images are supposed to be content, and now they are just a bunch of empty div’s and hard for non-developer users to right click and save them. So I raised the question to my co-workers, and the answer I got was that: it is more semantic to do that for these images because they are wrapped in < a> and it is supposed to be considered as a “button” if it is in < a>. This explanation makes me even more concerned, because content is content, and I always know of < img> can be used in < a> as long as it is in a semantic way.

    I would really like to know what other fellow front end devs’ opinions on this are.

    Thanks!

    # April 26, 2013 at 5:21 am

    I find, in the days of Responsive Web Design that it’s easier to deal with header / slider images as background images as you can display different crops of the same image just by having a fluid container size. I’m also a fan of the classic – h1 text-indent logo swap out…

    I also like having almost no graphical or style elements in my HTML markup but that’s just a personal preference…

    That said when an image is there, truly as content – supporting a paragraph of text for example then I can’t see why you wouldn’t use an inline `` tag.

    # April 26, 2013 at 6:11 am

    Content is content…thus BAD.

    Although I’m not an accessibility nut….the site would be a nightmare for screenreaders.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

Projects

Colophon

CSS-Tricks* is created, written by, and maintained by Chris Coyier. It is built on WordPress, hosted by MediaTemple, and the assets are served by MaxCDN. The fonts are Source Sans and Source Code Pro. It is made possible by viewers like you who subscribe to The Lodge and through advertising for products and services I like.

*May or may not contain any actual "CSS" or "Tricks".