I want to create a simple webpage . . . a video player (responsive design) placed upon an attractive background image. For mobile devices and smaller screens (tablets) I plan on using a simple solid color or gradient background image. For larger displays, however, (probably 1440w and up) I would like to use an actual, attractive background image. I will then position the player in the lower right or left part of the page - or perhaps centered, depending on the image. My plan is to use the @media only screen query to do this, loading the appropriate bg image per screen size. Can I put all the queries in one external style sheet, and if so, must I list them in any particular order (i.e., smallest width res to the highest)?
Some related questions concerning this project (if you'd be so kind to share advice :) ). Can vector images be used for backgrounds in a web page? Are there any good sources for vector background images on the web? Is there an easier way to accomplish what I've described above? This project is mainly just to share family videos with a wide circle of friends and family. I've thought about just creating 3 separate web pages (small, medium, and large) and letting folks bookmark the one that works best for them based on the device they're using to view the videos. Any thoughts on that?