How can one load images responsively but use them as css background images instead of <img>?

Question

I have looked at quite a few polyfill plugins but they all seem to rely on injecting img tags depending on the media query.

What I would like to do is load different sized images but display them using inline CSS as a background image on an unordered list.

So something along the lines of,

@media (min-width: 768px)

<ul style="background-image:(path to medium image)">
     <li class="hover"></li>
     <li class="hover"></li>
</ul>

@media (min-width: 1280px)

<ul style="background-image:(path to large image)">
     <li class="hover"></li>
     <li class="hover"></li>
</ul>

Is this possible? Is there a way to implement this using an img tag>? I need the ul to fit the picture so the li hovers can sit inside it.

EDIT - I was thinking about adding a style block directly on the page using media queries so I could use my server data to populate them dynamically.

<style>
@media (min-width: 768px) {
      .image { background-image: <%: model.small-image %>; }
}

@media (min-width: 1280px) {
      .image { background-image: <%: model.large-image %>; }
}
</style>

Is that a viable solution?

Answer 1

If I'm understanding your question correctly, then something like the following should get you started.

HTML

<ul class="ul-background">
<li>one</li>
<li>two</li>
</ul>  

CSS

@media (max-width: 767px) {

.ul-background{
background-image: url('path-to-tablet-image.jpg');
background-repeat:no-repeat;
background-size:contain;
}
}  

Use different media requests with different background images for smartphones/ tablets / desktops.

You can fine-tune how the background image fits the space by using background-size:contain or background-image:cover.

A couple of links with more details about what you can do with this:
http://www.w3schools.com/cssref/css3_pr_background-size.asp
http://css-tricks.com/perfect-full-page-background-image/

Good luck!