CSS 3: Background Size

Background size allows you to scale the CSS background image you are using. Until now background-size as intended in CSS3 is not supported in any browser, however Chrome, Opera, Safari, and Firefox 3.6 alpha all implement their own custom markup. Here is an example:

body {
    background-image: url(img1.jpg);
    background-size: 60% 40%; /* w3 spec - no browser supports it yet */
    -moz-background-size: 60% 40%; /* used for firefox */
    -o-background-size: 60% 40%; /* used for opera */
    -webkit-background-size: 60% 40%; /* used for safari and chrome */
}

It is important to note that these proprietary controls will be ignored by other browsers so you can start using them immediately. Of course always test with other borwsers to see how your web page displays in browsers (such as Internet Explorer) that do not yet support the background-size property.

Advertisement