Dremendo Tag Line
CSS Tutorial

CSS Background

Color and Background

In this lesson, we will learn how to work with background in HTML using different types of CSS background properties.

CSS background Property

The CSS background property is used to work with the background color and image. It consists of several sub-properties among which the most frequently used properties are:

  • background-color
  • background-image
  • background-repeat
  • background-position
  • background-position-x
  • background-position-y
  • background-attachment
  • background-size

Let's discuss each background property in detail with examples.

video-poster

background-color

The background-color property is used to apply a background color to an HTML element. For example:

Example 
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>background-color Example</title>

    <!-- Internal CSS -->
    <style>
        body {
            background-color: yellow;
        }

        p {
            background-color: #54BDFF;
        }
    </style>
</head>

<body>
    <p>This is a paragraph of text.</p>
</body>

</html>

background-image

The background-image property is used to set a background image of an HTML element. You can also set multiple background images of an HTML element the background-image property. For example:

Example 
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>background-image Example</title>

    <!-- Internal CSS -->
    <style>
        div {
            height: 300px;
            background-image: url("butterfly-small.png");
        }
    </style>
</head>

<body>
    <div>
        <p>This is an example of background image.</p>
    </div>
</body>

</html>

Click here to download the above butterfly image file for practice purposes.

background-repeat

The background-repeat property is used to manage the repetition order of a background image of an HTML element. The values of background-repeat property are:

  • repeat: It will repeat the background image in both vertical and horizontal direction. The image is clipped if it does not fit. This is the default value of background-repeat property.
  • repeat-x: It will repeat the background image in horizontal direction.
  • repeat-y: It will repeat the background image in vertical direction.
  • no-repeat: It will not repeat the background image. The image is displayed only once.
  • space: It will repeat the background-image as many times as possible without getting clipped. The first and last images will be pinned to the respective sides of the element, and the whitespace will be evenly distributed between the images.
  • round: It will repeat the background-image without clipping to completely fill the available space. But to fill the space properly it may either squished or stretched the image.
Example 
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>background-repeat Example</title>

    <!-- Internal CSS -->
    <style>
        div {
            height: 300px;
            background-image: url("butterfly-small.png");
            background-repeat: repeat;
        }
    </style>
</head>

<body>
    <div>
        <p>This is a paragraph of text.</p>
    </div>
</body>

</html>

background-position

By default, a background image will be positioned in the top left corner of the screen. The background-position property is used to change the default position of the background image anywhere you like on the screen.

The background-position property has two values. The first value represent the x coordinate and the second value represent the y coordinate.

Both x and y coordinates can be represented in pixel, percentage or word like left, right, top, bottom and center. For example:

  • background-position: 100px 200px: The background image will be positioned at 100 pixel from the left edge and 200 pixel from the top edge of its parent element.
  • background-position: 50% 50%;: The background image will be positioned at 50% from the left edge and 50% from the top edge of its parent element.
  • background-position: top left: The background image will be positioned in the top left corner of its parent element. You can also write left top.
  • background-position: top right: The background image will be positioned in the top right corner of its parent element. You can also write right top.
  • background-position: top center: The background image will be positioned horizontally center from the top edge of its parent element. You can also write center top.
  • background-position: bottom left: The background image will be positioned in the bottom left corner of its parent element. You can also write left bottom.
  • background-position: bottom right: The background image will be positioned in the bottom right corner of its parent element. You can also write right bottom.
  • background-position: bottom center: The background image will be positioned horizontally center from the bottom edge of its parent element. You can also write center bottom.
  • background-position: left center: The background image will be positioned vertically center from the left edge of its parent element. You can also write center left.
  • background-position: right center: The background image will be positioned vertically center from the right edge of its parent element. You can also write center right.
  • background-position: center center: The background image will be positioned horizontally and vertically center of its parent element. It means the image will be positioned in the middle of its parent element.
Example 
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>background-position Example</title>

    <!-- Internal CSS -->
    <style>
        div {
            height: 300px;
            background-image: url("butterfly-small.png");
            background-repeat: no-repeat;
            background-position: 100px 200px;
        }
    </style>
</head>

<body>
    <div>
        <p>The image is positioned at 100px from left and 200px from top of the div.</p>
    </div>
</body>

</html>

background-position-x

The background-position-x property is used to positioned a background image from the left edge of its parent element. For example:

Example 
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>background-position Example</title>

    <!-- Internal CSS -->
    <style>
        div {
            height: 300px;
            background-image: url("butterfly-small.png");
            background-repeat: no-repeat;
            background-position-x: 250px;
        }
    </style>
</head>

<body>
    <div>
        <p>The image is positioned at 250px from left edge of the div.</p>
    </div>
</body>

</html>

You can also use value in percentage to the move the background image from the left side.

background-position-y

The background-position-y property is used to positioned a background image from the top edge of its parent element. For example:

Example 
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>background-position Example</title>

    <!-- Internal CSS -->
    <style>
        div {
            height: 300px;
            background-image: url("butterfly-small.png");
            background-repeat: no-repeat;
            background-position-y: 100px;
        }
    </style>
</head>

<body>
    <div>
        <p>The image is positioned at 100px from top edge of the div.</p>
    </div>
</body>

</html>

background-attachment

The background-attachment property specifies whether a background picture is fixed or scrolls along with the containing element. The background-attachment property has two values and they are:

  • scroll: The default value of background-attachment is scroll. It means that the background image will scroll with the content when user scroll the content.
  • fixed: The fixed value will locked the background image and it will not scroll along with the content when user scroll the content.
Example 
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>background-attachment Example</title>

    <!-- Internal CSS -->
    <style>
        div {
            background-image: url("butterfly-small.png");
            background-repeat: no-repeat;
            background-attachment: scroll;
        }
    </style>
</head>

<body>
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <br>
        <br>
        <br>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <br>
        <br>
        <br>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <br>
        <br>
        <br>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</body>

</html>

background-size

The background-size property is used to control the width and height of the background image. The values of the background-size property are as follows:

  • cover: The background image is scaled to cover the entire element's area while maintaining its aspect ratio. Some parts of the image might be cropped if necessary.
  • contain: The background image is scaled to fit within the element's area, ensuring that the entire image is visible. This might result in empty space within the element if the image's aspect ratio differs from the element's aspect ratio.
  • pixel: You can specify a length value in pixels for the width or height of the background image.
  • percent: You can specify a length value in percent for the width or height of the background image.
  • auto: The width and height of the background image is calculated automatically according to its aspect ratio.
Example 
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>background-attachment Example</title>

    <!-- Internal CSS -->
    <style>
        div {
            width: 300px;
            height: 250px;
            background-image: url("butterfly-small.png");
            background-repeat: no-repeat;
            background-size: cover;
        }
    </style>
</head>

<body>
    <div>
        <p>background-size: cover</p>
    </div>
</body>

</html>

Previous Next
Dremendo

For over a decade, Dremendo has been recognized for providing quality education. We proudly introduce our newly open online learning platform, which offers free access to popular computer courses.

Our Courses
News Updates
© 2024 Dremendo. All Rights Reserved.