CSS BACKGROUNDS


The css background properties are used to  add background effects for Html element. 

we will learn about the following css background properties.

  1. background-color
  2. background-image
  3. background-repeat
  4. background-attachment
  5. background-position
  6. shorthand property (background)
CSS background-color

The background-color property specifies the background color of an element.

Example:

<! DOCTYPE html> 

<html>

<head>

    <style>

        body {

          background-color: red;

        }

    </style>

</head>

<body>

    <h1>Hello background-color!</h1>

    <p> Red background color</p>

</body>

</html>


OPACITY / TRANSPARENCY

The opacity property specifies the opacity of an element.

<! DOCTYPE html> 

<html>

<head>

    <style>

        body {

          background-color: red;

           opacity: 0.3;

        }

    </style>

</head>

<body>

    <h1>Hello background-color!</h1>

</body>

</html>


CSS background-image:

The background-image property specifies the background image of an element.

Example:

<! DOCTYPE html> 

<html>

<head>

    <style>

        body {

          background-image: url("image.jpg");

        }

    </style>

</head>

<body>

    <h1>Hello background-image!</h1>

</body>

</html>


CSS background-repeat

By default, the background-image property repeats an image both horizontally and vertically.

background repeat: the background image only once is also specified by the background-repeat property:

syntax:

<! DOCTYPE html> 

<html>

<head>

    <style>

        body {

          background-image: url("image.jpg");

          background-repeat: no repeat/ repeat-x/ repeat-y;

        }

    </style>

</head>

<body>

    <h1>Hello background-image!</h1>

</body>

</html>


CSS background-position

Then background-position property is used to specify the position of the background image.

syntax:

<! DOCTYPE html> 

<html>

<head>

    <style>

        body {

        background-image: url("image.jpg");

        background-repeat: no repeat;

        background-position: center/ left /right / center-top / center-bottom;

        background-position-x: center / left / right;

        background-position-y: center / left / right;

        }

    </style>

</head>

<body>

    <h1>Hello background-image!</h1>

</body>

</html>

CSS background-attachment

The background-attachment property specifies whether the background image should scroll or be fixed.

syntax:

<! DOCTYPE html> 

<html>

<head>

    <style>

        body {

        background-image: url("image.jpg");

        background-repeat: no repeat;

        background-position: center;

        background-attachment: scroll / fixed;

        }

    </style>

</head>

<body>

    <h1>Hello background-image!</h1>

</body>

</html>