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!