2 replies [Last post]
ukballer1012
Offline
newbie
Last seen: 9 years 50 weeks ago
Timezone: GMT-4
Joined: 2012-08-15
Posts: 3
Points: 5

On my site I have a site-wide media query file named media.css which contains this code:

/* w1920px */
@import url("global.css") only screen and (min-width:1601px);
/* w1600px */
@import url("global_w1600px.css") only screen and (min-width:1361px) and (max-width:1600px);
/* w1360px */
@import url("global_w1360px.css") only screen and (max-width:1360px);

Each sheet is identical except the background image resizes to the width specified in each comment. I did this mainly so that people with lower resolution monitors can see the full image but there is a problem. If you have a 1080p monitor and resize the window smaller the image doesn't fill the entire screen since it uses a smaller background image. See for yourself at http://www.centomedia.com It's my first site so bear with me Laughing out loud. I was wondering if it was possible for CSS to query the device display output (your set screen resolution in your system display settings) instead of the browser window resolution window, so that if you have a larger resolution and you scale the window down the background image doesn't change, but still have it work if that makes sense.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 23 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Don't make any media

Don't make any media inquiries. Use the large image for all.

That said, I am not at all sure of what you want. So, …

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Like Gary I am having trouble

Like Gary I am having trouble visualizing what you are trying to do.
To answer your question on device width media queries, yes you can.
See the test page at http://csscreator.com/media.html