Solved

Can I use a * wild card in a media query?

Posted on 2015-01-01
2
180 Views
Last Modified: 2015-01-01
Well, I guess we'll see if there are any "true geeks" workin' the holidays. :)

I've developed a simple webpage. Basically it is a fixed bg image with a video player that you can scroll down to (which actually pulls it up to center over the bg image). On smaller devices (primarily smart phones), I only load the video player with a solid black bg - that is, no bg image.

I've used media queries to load appropriate bg images on different larger devices based on 3 different aspect ratios . . . the ones that seem to be the most common in "the computing world." (16:10, 16:9, and 4:3). My question is, can I use a "device-aspect-ratio: *" query to load a generic bg of some sort for all other aspect ratios?
Is that how I would express it, by just putting an * where I would normally put say 16/9 or whatever?
0
Comment
Question by:Thunderman54
2 Comments
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 40526593
Just specify a default background image before anything else in the "cascade".

Example:

body {
    background-image: url(...)
}


Then cover all the exceptions.
0
 

Author Comment

by:Thunderman54
ID: 40526639
Sounds good. I'll try that and get back with you. I'm getting ready to post another question maybe you can help me with. Has to do with Firefox (testing on Android tablet) not interpreting my stylesheet, media query or both.
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question