CSS background-clip

Home / CSS – Tutorial / CSS background-clip

The CSS background-clip specifies the painting area of the background.

The property values:

border-box
padding-box
content-box
inherit

border-box:

The background image and color will be drawn inside the border-box.

Example:

<!DOCTYPE html>
<html> 
  <head>   
    <style> 
      div { 
        background-color: #333300; 
        background-clip: border-box; 
        text-align: center;
        border:5px dotted #006600;
      } 
      h1,h2{
      color: White;
      }
    </style> 
  </head>

  <body> 
    <div> 
      <h1>
       Welcome to the I2tutorials
      </h1> 
      <h2>
       background-clip: border-box;
      </h2>
        </div> 
    </body> 
</html>

OUTPUT:

CSS background-clip

padding-box:

It sets the background within the border.

Example:

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        background-color: #cc3300;
        background-clip: padding-box;
        padding: 25px;
        text-align: center;
        border:5px dashed #990033;
      }
      h1,h2{
      color: white;
      }
    </style>
  </head>

  <body>
    <div>
      <h1>
       Welcome to the I2tutorials
      </h1>
      <h2>
       background-clip: padding-box;
      </h2>
    </div>
  </body>
</html>

OUTPUT:

CSS background-clip

content-box:

The background-color up to the content only.

Example:

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        background-color: #660033;
        background-clip: content-box;
        padding: 15px;
        text-align: center;
        border:5px dashed #ff3300;
      }
      h1,h2{
      color: white;
      }
    </style>
  </head>

  <body>
    <div>
     <h1>
      Welcome to the I2tutorials
     </h1>
     <h2>
      background-clip: content-box;
     </h2>
    </div>
  </body>
</html>

OUTPUT:

CSS background-clip