Demo : https://www.lenlop123.com/2020/09/16-background-color-background-image.html


<style type="text/css">
  body {
      background-color: #C0C0C0;
  }
  h1 {
      background-color: rgb(135,206,235);
  }
  p {
      background-color: LightGreen;
  }
</style>

<h1>This is a heading</h1>
<p>This is a paragraph</p>




<html>
  <head>
    <title>Page Title</title>

    <style type="text/css">
      body {
        background-image: url("http://www.sololearn.com/uploads/css_logo.png");
        background-color: #e9e9e9;
      }
     
      p {
          padding: 30px;
          background-image: url("http://www.sololearn.com/images/tree.jpg");
          color: white;  
      }

    </style>

  </head>
  <body>
    <p>This paragraph has a background image.</p>
  </body>
</html>




<style type="text/css">
    body {
        background-image: url("http://www.sololearn.com/uploads/css_logo.png");
        background-repeat: repeat-x;
    } 
</style>



<style type="text/css">   
    body {
        background-image: url("http://www.sololearn.com/uploads/css_logo.png");
        background-repeat: repeat-y;
    }
</style>

 




<html>
  <head>
    <title>Page Title</title>

    <style type="text/css">
       body {
          background-image: url("http://www.sololearn.com/uploads/css_logo.png");
          background-repeat: repeat-x;
      }
      p {
          background-image: url("http://www.sololearn.com/uploads/css_logo.png");
          background-repeat: inherit;
          margin-top: 200px;
          padding: 50px;
      }
    </style>

  </head>
  <body>
    <p>This paragraph has a background image.</p>
  </body>
</html>





<html>
  <head>
    <title>Page Title</title>

    <style type="text/css">
     body {
        background-image: url("http://www.sololearn.com/uploads/css_logo.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
    }

    .div1 {
        background-image: url("http://www.sololearn.com/uploads/css_logo.png");
        background-repeat: no-repeat;
        background-attachment: scroll;
    }
    </style>

  </head>
 <body>
        <p>This background-image is fixed. Even if you try to scroll down the page, it will not move.</p>
        <p>This background-image is fixed. Even if you try to scroll down the page, it will not move.</p>
        <p>This background-image is fixed. Even if you try to scroll down the page, it will not move.</p>
        <p>This background-image is fixed. Even if you try to scroll down the page, it will not move.</p>
        <p>This background-image is fixed. Even if you try to scroll down the page, it will not move.</p>
        <p>This background-image is fixed. Even if you try to scroll down the page, it will not move.</p>
        <p>This background-image is fixed. Even if you try to scroll down the page, it will not move.</p>
        <p>This background-image is fixed. Even if you try to scroll down the page, it will not move.</p>
    </body>
</html>