Multiple dynamic background image urls based on screen size

Question

I want to use two different background-image:url() values based on screen size. This is fairly simple to do if the urls are known ahead of time:

@media (max-width: 400px) {
.element {
    background-image:url("/Images/1.png");
}
}

@media (min-width: 401px) {
.element {
    background-image:url("/Images/2.png");
}
}

However, I do not know my image urls ahead of time - they are based on information from the user. I can set a single background-image:url() dynamically in the code behind like so:

string backgroundStyle = "background-image: url(\""+loginImagePath+"\"); ";
sBodyWrapper.Attributes.Add("style", backgroundStyle);

But I'm not sure how I might go about setting two different background images which alternatively show based on screen width. I could set the two background images on different elements and hide one of those elements, but I really would like this background image to be on a single body wrapping element.
Is there any way to set values inside of media queries? Can conditional css be applied on the element's style attribute?

Answer 1

You could add the conditional CSS via a style tag appended to the document:

var rules = '<style>
@media(max-width: 400px){
  background-image:url("Images/1.png");
}
@media(min-width: 401px){
  background-image:url("Images/2.png");
}
</style>';