CSS - background Property

Quiz

CSS background property is a shorthand property to set a number of background properties in one go. Properties like background color, image, position, size, repeat, origin, clip, and attachment can be set at once. This property is used for styling the appearance of the elements.

Syntax

background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment | initial | inherit;

Property Values

Value	Description
background-color	It specifies the background color to be used.
background-image	It specifies one or more background images to be used.
background-position	It specifies the position of the background images.
background-size	It specifies the size of the background images.
background-repeat	It specifies how to repeat the background images.
background-origin	It specifies the positioning area of the background images.
background-clip	It specifies the painting area of the background images.
background-attachment	It specifies the type of scroll for the background images.
initial	This sets the property to its default value.
inherit	This inherits the property from the parent element.

Examples of CSS Background Property

Below listed examples explain how the background property works with its individual components.

Setting Background Color

The background-color component of background property sets the background color of the element. In the following example, background-color property has been used to set the background color of the div tag with red color.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        p {
            background-color: red;
            padding: 20px;
        }
    </style>
</head>

<body>
    <h2>CSS background property</h2>
    <div>
        <p> This is some text.</p>
    </div>
</body>

</html>

Setting Background Image

The background-image component of background property sets the background image of the element. In the following example, background-image property has been used to set the background image as flowers.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            margin: 0;
            height: 200px;
            background-image: url('/https/www.tutorialspoint.com/css/images/border.png');
        }
    </style>
</head>

<body>
    <h2>CSS background property</h2>

</body>

</html>

Setting Background Position

The background-position component of background property sets the background positon of the element. In the following example, background-position property has been used to set the background position as center.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        #box {
            height: 200px;
            border: 8px solid black;
            padding: 25px;
            background-position: center;
            background-image: url("/https/www.tutorialspoint.com/css/images/orange-flower.jpg");
        }
    </style>
</head>

<body>

    <h2>The background-position Property</h2>
    <p>Center Position</p>
    <div id="box">
    </div>

</body>

Setting Background Size

The background-size component of background property sets the background size of the element. In the following example, background-size property has been used to set the background size as cover. This will completely fit the image to the entire width.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        body {

            background-image: url("/https/www.tutorialspoint.com/css/images/orange-flower.jpg");
            height:400px;
            background-size: cover;
            color:white;
        }
    </style>
</head>

<body>
    <h2>CSS background property</h2>
</body>

</html>

Setting Background Repeat

The background-repeat component of background property determines the repetition of the background image. In the following example, background-repeat property has been used and is given the repeat-y value. The image repeats along the cross axis.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .first {
            padding: 30%;
            background-repeat: repeat-y;
            background-image: url("/https/www.tutorialspoint.com/css/images/logo.png");
        }
    </style>
</head>

<body>
    <h2>CSS background property</h2>
    <p> Repeat along Y direction.</p>
    <div class="first">
    </div>

</body>

</html>

Setting Background Origin

The background-origin component of background property determines the background's origin, the from from where the image has to start. In the following example, background-repeat property has been used and is set to content box. The image starts from the edge of the content box.

Example

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Background Origin Example</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background: url('/https/www.tutorialspoint.com/css/images/white-flower.jpg');
            background-origin: content-box;
            padding:20px;
            border: 10px dashed red;
        }
    </style>
</head>

<body>
    <h2>CSS background property</h2>
    <div class="box"></div>
</body>

</html>

Setting Background Clip

The background-clip component of background property determines the painitng area of the background images. In the following example, background-clip property has been used with content box value.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background: url('/https/www.tutorialspoint.com/css/images/white-flower.jpg');
            background-clip: content-box;
            padding: 20px;
            border: 10px dashed grey;
        }
    </style>
</head>

<body>
    <h2>CSS background property</h2>
    <div class="box"></div>
</body>

</html>

Setting Background Attachment

The background-attachment component of background property determines the type of scroll on the background images. In the following example, background-attachment property has been used with fixed value.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            height: 400px;
            background-image: url('/https/www.tutorialspoint.com/css/images/orange-flower.jpg');
            background-size:cover;
            background-attachment: fixed;
            color: white;
        }
    </style>
</head>

<body>
    <h2>CSS background property</h2>
    <p>This is a sample text. The image here is fixed.</p>
</body>

</html>

Supported Browsers

Property
background	1.0	4.0	1.0	1.0	3.5

css_reference.htm

Print Page