CSS Background

Having a proper background is also an essential part of web page design. The background property of CSS will allow you to define background effects in various HTML elements. In this chapter, you will learn how to apply and set different backgrounds for your HTML element.

Background Property in CSS

There are 14 background properties, and five of these primarily important background properties are discussed here that help give background effects to your HTML documents. These are:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Let us discuss and implement each of them one by one.

Background Color

You have to make use of the background-color property for specifying the background color of your HTML elements. In CSS, you can set the color using any one of the following manners:

  • using a valid name of color such as "red", "blue", etc
  • using a HEX value such as: #ff0000, #ffff00, etc
  • using an RGB value such as: "rgb(255,0,0)", "rgb(255,255,0)"

You can set the background color of a web page like this:

Example:

body
{
    background-color: aqua;
}

Applying background-color property to other HTML elements:

Example:

h2 {
    background-color: blue;
}

div {
    background-color: yellow;
}

p {
    background-color: orange;
}

Here is an example of HTML code to show how to implement it:

Example:

<!DOCTYPE html>
<html>

    <head>
        <style>
            body {
                background-color: aqua;
            }
            
            h2 {
                background-color: blue;
            }
            
            p {
                background-color: orange;
            }
        </style>
    </head>

    <body>
        <h2>CSS Background Color</h2>
        <p>Example of CSS background-color implementation.</p>
    </body>

</html>

Background Image

You can also apply the background-image property to specify an image as a background image for a particular element. By default, your image will repeat itself to cover the entire element section.

You can set the background image for your web page like this:

Example:

body {
    background-image: url("bg-image.jpg");
}

It is recommended to use an image that does not disturb the text's readability within the element.

Repeat Background Image Horizontally or Vertically

As said above, the background-image property will repeat your selected image both horizontally as well as vertically. At times, it looks strange too, when background images get repeated.

In that case, you can customize it so that it can repeat horizontally only. This can be implemented like this:

Example:

body {
    background-image: url("bg-image.jpg");
    background-repeat: repeat-x;
}

Background Attachment

CSS's background-attachment property is implemented to specify if the background image is fixed or is scrolling with the rest of your page within the browser window. If this is set to "fixed", the background image will not shift its position when scrolling within the browser.

Here is an example of how to implement this:

Example:

<!DOCTYPE html>
<html>

    <head>
        <style>
            body {
                background-image: url("bg-image.jpg");
                background-repeat: no-repeat;
                background-position: left top;
                margin-right: 250px;
                background-attachment: scroll;
            }
        </style>
    </head>

    <body>
        <h2>Example of Background-attachment</h2>
        <p>Let us see how it works </p>
        <p>Scroll down and you will see the image is not rolling down with your scroll. </p>
        <p>Try to Scroll down. Background Image remains fixed.</p>
        <p>Try to Scroll down. Background Image remains fixed.</p>
        <p>Try to Scroll down. Background Image remains fixed.</p>
        <p>Try to Scroll down. Background Image remains fixed.</p>
        <p>. . . .</p>
        <p>Try to Scroll down. Background Image remains fixed.</p>
        <p>Try to Scroll down. Background Image remains fixed.</p>
        <p>Try to Scroll down. Background Image remains fixed</p>
    </body>

</html>

Background Position

This CSS property is implemented to define the original position of your background image. By default, your background image is located at the top-left of your webpage.

Moreover, there are other options to set the following positions:

  • center
  • top
  • bottom
  • left
  • right

You can implement it like this:

Example:

body {
    background-image: url("computer.jpg");
    background-repeat: no-repeat;
    background-position: right top;
}
Found This Page Useful? Share It!
Get the Latest Tutorials and Updates
Join us on Telegram