How to use CSS3 background properties?

  • CSS3 introduces two new background properties-
    1. background-size
    2. background-origin
  • background-size: This property allows web designers to play with background images. Images can be squashed or stretched easily with the help of this property or in other words it is used to resize the background images. Earlier background images were used to appear on the browser in its actual size.
    1. contain: The Image is resized so it fits the container or we can say that the image is resized in such a way that its width and height(the bigger one) will not exceed the container’s dimensions. Note: original size of the image is 400px x 400px.

    2. cover: The keyword “cover” is also accepted by the background-size property. The image is resized in such a way that either its width and height (the smaller one) covers the whole container but the image could be cropped if the image has a different aspect ratio.

    3. length: It helps us to define the width and height of the background image. The first value represents the width of the image and the second value represent the height. If only one value is mentioned then it is assumed as a width and height is set to “auto”.

    4. percentage: If the value is given in percentage then the size of the background image is relative to the parent element. The first value represents the width of the image and the second value represent the height. If only one value is mentioned then it is assumed as a width and height is set to “auto”.eg: If the width and height of the background-size is set to 80% 50% respectively then the image will cover 80% width and 50% height of the parent element.

    Browser support: Firefox 4+, Safari 5+, IE9+, Chrome, and Opera.

  • background-origin:  The Background-origin property allow web designers to determine the background position area in other words it helps us to know that the background position property will be positioned relative to the “content box”, “border box”, or the “padding box”.
    1. content-box:  The background image will be placed under the content div or It is relative to the content box.

    2. padding-box:  The background image position is relative to the defined padding. The background image will cover the padding area also.

    3. border-box:  The background image position is relative to the border of the element.

    Browser support: Firefox 4+, Safari 5+, IE9+, Chrome, and Opera.

  • Background clip: The background-clip property specifies whether the backgrounds of an element extends into the border or not.

     

    content box

    padding box

    border box

     

    Browser support: Firefox, IE9+, Chrome, Opera and Safari.

Share

Leave a Reply

Your email address will not be published. Required fields are marked *

*