ankitweblogic logo
W e b t u t o r i a l s

CSS3 Tutorial

Types of Style Sheet

Import Style Sheet

CSS3 Border Images

CSS2 Clip Property

CSS3 Background

CSS3 Color Property

CSS3 Linear Gradient

CSS3 Radial Gradient

CSS3 text-shadow

CSS3 word-wrap

CSS3 box-shadow

CSS text-stroke

CSS3 Nested Menu

CSS3 Combinators

CSS3 Pseudo Classes

CSS3 Pseudo Element

CSS3 2D Transform

CSS3 2D Transform

CSS3 3D Transform

CSS3 Transitions

CSS3 Animation

CSS3 Animation Exercise

CSS3 Multiple Columns

After Before Shadow

CSS3 Resize Property

CSS3 Shapes

Exercise Shape

CSS Tooltip

CSS Hover Effect

CSS3 background

Background is a CSS1 version with new Properties in CSS3. Background can be apply on any HTML Element. CSS1 Background Properties are:

Property Description
background-color Specify the background color to be used.
background-image Specify the background image to be used.
background-position Specifies the position of the background images.
background-repeat Specifies how to repeat the background images.
background-attachment Specifies whether the background images are fixed or scrolls.

CSS3 Multiple Backgrounds

CSS3 allows you to add multiple background images for an HTML element, using background-image property.
Example: Multiple Backgrounds

Or you can write above code in one line.
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat; 
CSS3 new background properties are:
Property Description
background-size Specifies the size of the background images. The size can be specified in lengths, percentages, or by using one of the two keywords: contain or cover.
background-origin Specifies the positioning area of the background images.
background-clip Specifies the painting area of the background images.

CSS3 Background Size

The CSS3 background-size property allows you to specify the size of background images. Before CSS3, the size of a background image was the actual size of the image. The size can be specified in pixel, percentages, or by using one of the two keywords: contain or cover.

            div {
            background: url(img_flower.jpg);
            background-size: 100px 80px;
            background-repeat: no-repeat;
        }
        
The contain keyword scales the background image to be as large as possible (but both its width and its height must fit inside the content area).
background-size: contain;

The cover keyword scales the background image so that the content area is completely covered by the background image (both its width and height are equal to or exceed the content area).
background-size: cover;

Define Sizes of Multiple Background Images
div {
    background: url(img_flwr.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, 
    url(paper.gif) left top repeat;
    background-size: 50px, 130px, auto;
}
Full Size Background Image
html {
    background: url(img_flower.jpg) no-repeat center fixed; 
    background-size: cover;
}

CSS3 background-origin Property

The CSS3 background-origin property specifies where the background image is positioned. CSS3 background-origin property takes three different values:
1. border-box - the background image starts from the upper left corner of the border
2. padding-box - (default) the background image starts from the upper left corner of the padding edge
3. content-box - the background image starts from the upper left corner of the content.

    div {
    border: 10px solid black;
    padding: 35px;
    background: url(img_flwr.gif);
    background-repeat: no-repeat;
    background-origin: border-box | padding_box | content-box;
    }

CSS3 background-clip Property

The CSS3 background-clip property specifies the painting area of the background. The property takes three different values:
1. border-box (default), the background is clipped to the border box.
2. padding-box : The background is clipped to the padding box.
3. content-box : The background is clipped to the content box.

    div {
    border:10px dotted black;
    padding:35px;
    background:yellow;
    background-clip:content-box;
}
background-clip: border-box|padding-box|content-box;