Question

I need to dynamically load banner images into a HTML5 app and would like a couple of different versions to suit the screen widths. I can’t correctly determine the phone’s screen width, so the only way I can think of doing this is to add background images of a div and use @media to determine the screen width and display the correct image.

For example:

 <span style="background-image:particular_ad.png; @media (max-width:300px){background-image:particular_ad_small.png;}"></span>

Is this possible, or does anyone have any other suggestions?

Answer 1

@media at-rules and media queries cannot exist in inline style attributes as they can only contain property: value declarations. As the spec puts it:

The value of the style attribute must match the syntax of the contents of a CSS declaration block

The only way to apply styles to one specific element only in certain media is with a separate rule in your stylesheet (be it linked externally or internally in a <style> element), which means you’ll need to come up with a selector for it. You can grab one using your browser’s dev tools, or figure out a class and/or ID combination that isolates this element:

#myelement { background-image: url(particular_ad.png); }

@media (max-width: 300px) {
    #myelement { background-image: url(particular_ad_small.png); }
}

If you’re unable to find a selector that will reliably match this element alone due to the nature of your page, you can use a custom property, provided you don’t need to worry about specificity or Internet Explorer:

:root { --particular-ad: url(particular_ad.png); }

@media (max-width: 300px) {
    :root { --particular-ad: url(particular_ad_small.png); }
}

<span style="background-image: var(--particular-ad);"></span>