Backgrounds


The CSS background properties are used to define the background effects for elements.

CSS background properties:

  1. background-color
  2. background-image
  3. background-repeat
  4. background-position

1.Background-color: The <background-color> property specifies the background color of an element.

<!DOCTYPE html>
<html>
     <style>
   body {background-color: }
   </style>
    <body>
        <p>Hello, World!</p>
    </body>
</html>
  • Background color can also be in <p>(paragraphs), <h1>(headings) and <div>(divs).

  • Background image: The <background-image> property specifies an image to use as the background of an element.

    <!DOCTYPE html>

    Hello, World!

  • Background image repeat: the <background-image> property repeats an image both horizontally and vertically.

    <!DOCTYPE html>

    Hello, World!

*Tip: To repeat an image vertically, set background-repeat: repeat-y;.

To only show the image once, set background-repeat: no-repeat;.

If you want your background image to cover the whole page, set background-size: cover;.

  1. Background image position:The position of the image is specified by the <background-position> property.

    <!DOCTYPE html>

    Hello, World!

Exercise


Copyright © learn-html.org. Read our Terms of Use and Privacy Policy