Can I use a media query in internal CSS, and will it avoid loading the background images I define?

Question

I'm working on a responsive site where each page will have a large hero image, defined in the CMS. I'd like to avoid having to download that background image on mobiles.

The only way I can think to do it is to have some inline CSS in the head of the page like so:

<style type="text/css">
    @media only screen and (min-width: 680px) {
        .hero-image { background-image: url(../images/image.jpg); }
    }
</style>

First, can I use media queries in inline CSS?

Second, will this avoid downloading the image on mobiles?

Third, is there a better way?

Thanks

Solution 1

Yes, you may use media queries in a <style> tag. The image is only loaded if the CSS requires it to be, so if nothing matches the selector then it won't bother loading the image.

It would probably be better to include the media query in your external CSS file, though. There's no reason to include it inlline.

Solution 2

No, it appears that you cannot inline @media tags:

Please refer to this: Is it possible to put CSS @media rules inline?

Solution 3

You might have better luck with a two-step media query, one that begins in CSS but ends in jQuery. Label your divs with an ID so jQuery can find them. The process is explained in detail here: http://www.fourfront.us/blog/jquery-window-width-and-media-queries

Comments

[Urs]

what is described here is called "internal css", not inline.

[Ciro Santilli OurBigBook.com]

@Urs fixed it, was misleading.

[davidcondrey]

possible duplicate of Is it possible to put CSS @media rules inline?

[GusRuss89]

Thanks. The reason to include it inline is that it needs to be output by the CMS (there will be a unique hero image per page).

[windmaomao]

I used the similar way to achieve <pre> background-image: url("{{ $resource_path }}/pictures/btn_menu_show.png") </pre>

[xtoq]

Although the wording on the original question (at least as of today) does state "inline", the code OP gives shows that they are asking about putting media queries internally, not inline. Common mistake, I make it about once a week. =)

[Angeliss44]

@NiettheDarkAbsol You say there's no reason to include it inline but that isn't true. When you have dynamically generated content such as pulling data and images from a database on the fly you have to use internal css to style the content if it is all different. For example, I have an event calendar that is generated from a database on my server. When an event is added to the calendar it creates a page for the event. Because I want the event image to look right on different devices, there are different files referenced in the db. I have to use internal css to define my media query for the page