Wed, 2012-08-15 15:15
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
. 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.
Wed, 2012-08-15 18:43
#1
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
Wed, 2012-08-15 20:52
#2
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