CSS3 Media Queries Explained - Ubelly CSS3 Media Queries allow you to serve your content whilst giving consideration to the size of the screen of the device that is viewing your site. In this 25 minute talk about ‘responsive design’, Thomas Lewis (@tommylee on Twitter) explains why CSS3 Media Queries are important, how they work and how you can implement them today to create better websites. Nice to see Mr.Simon Collison (@colly) get a name check for excellent responsive design on colly.com : So if you want to know how to make your website respond to the size of the screen that is viewing it, you’ll learn how in this talk. You can make your websites automatically scale and re-display depending on the size of the screen on the viewing device and even using clever CSS tricks to change the content that is being presented to the viewer.
CSS is the second-most-important thing you can master when it comes to web design, right after HTML. And the capabilities of CSS can be staggering (especially with the new CSS3 standard already making appearances in some browsers). If you can imagine it, it’s likely someone has already figured out how to do it with CSS. Below are more than 250 resources for mastering CSS . While they’re not likely to make it any less staggering, they can help you master the techniques that will help set your designs apart from the crowd. CSS3 Resources
Published by Chris Coyier This post was originally published on August 21, 2009 and is now being being republished as it has been entirely revised . Both original methods are removed and now replaced by four new methods. The goal here is a background image on a website that covers the entire browser window at all times. Let's put some specifics on it: Fills entire page with image, no white space Scales image as needed Retains image proportions (aspect ratio) Image is centered on page Does not cause scrollbars As cross-browser compatible as possible Isn't some fancy shenanigans like Flash