There are four different syntaxes you can use with this property: the keyword syntax ('auto', 'cover' and 'contain'), the one-value syntax (sets the width of the image (height becomes 'auto'), the two-value syntax (first value: width of the image. The above responsive image CSS works on IE7 and IE9, but doesn’t work on IE8. The background-size property specifies the size of the background images. You can make the image auto resize to the max width of the boundary by using max-width:100% and height:auto. In the example below, I specify the container to display at 800px if possible, but it should not exceed 90% of the boundary width. The purpose of max-width is to prevent the element from extending the boundary. Max-width property allows you to set the max width of the element. It makes the video embed to expand fullwidth to the boundary. I’ve blogged about it before, you may read the details here. This responsive video CSS trick was discovered by . They are simple CSS properties such as min-width, max-width, overflow, and relative value - but these properties play an important part in responsive design. Today I’m going to share 5 of my commonly used CSS tricks along with sample cases for coding responsive designs. After saving the SVG file, we’ll run it through Jake Archibald’s brilliant SVGOMG tool. A path created in Inkscape on a 300×300 canvas. Other vector drawing tools are available. For desktop and responsive CSS: background: url (background.jpg) no-repeat center center fixed -webkit-background-size: cover -moz-background-size: cover -o-background-size: cover background. Making the design to be responsive is very easy as shown in my Responsive Design in 3 Steps tutorial, but maintaining the elements to look aesthetically balanced on all breakpoint layouts is an art. This one was thrown together quickly in Inkscape. It looks great via desktop browsers (IE, Chrome, Safari.) but when the responsive theme CSS kicks in it does not resize to the correct resolution.