Vickz

Have you ever seen a CSS stylesheet with multiple attributes applied to the one property and wondered how it’s done? Let’s go through it and make your stylesheets that much better.

body {
background-color: #fff;
background-image: url('images/background.jpg');
background-repeat: no-repeat ; /* repeat-x, repeat-y, no-repeat*/
background-attachment: fixed; /* scroll fixed */
background-position: center; /* top, bottom, center, left, right,
center */
}

It looks a lot for just styling the background, doesn’t it? Let’s change it into one property. We will be using ‘background’ to apply all of these properties in just the one.

body {
background: #fff url('images/background.jpg') no-repeat fixed
center;
}

Download the PDF now for more Shorthand CSS!

Thanks to Hulldo.

Tutorial CSS, CSS shortcut, download PDF, shorthand CSS