Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #44373
    McChen
    Member

    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!

    #133223
    iknowdavehouse
    Participant

    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.

    #133232
    Paulie_D
    Member

    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)
  • The forum ‘CSS’ is closed to new topics and replies.