Background Clip Property in CSS

The background-clip property defines how far the background (color or image) should extend within an element.

value	used for
border-box	The background extends to the outside edge of the border
padding-box	The background extends to the outside edge of the padding. No background is drawn beneath the border.
content-box	The background is painted within the content box.
overlay	In this mode, the background-color is mixed with the background-image to reflect the lightness or darkness of the backdrop.
text	The background is clipped to the foreground text.

When using background-clip: text check that the contrast ratio between the background color and the color of the text placed over it is high enough that people experiencing low vision conditions will be able to read the content of the page.

Source Code :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Background Clip</title>
  <style>
   div{
    width: 800px;
    height: 400px;
    background-image: url('bg.jpg');
    background-repeat:no-repeat;
    background-size: cover;
    font-size: 100px;
    font-family: Impact;
    text-align: center;
    color:transparent;
    background-clip: text;
    -webkit-background-clip: text;
   }
  </style>
</head>
<body>
  <h2> background-clip in CSS</h2>
  <div>
    Tutor Joes
  </div>
</body>
</html>

Output

Live Preview

CSS Tutorial

Properties Reference

CSS Properties Reference Guide

Background Clip Property in CSS

Source Code :

Output

CSS Tutorial

Properties Reference

Cascading Style Sheet

Flexbox Tutorial

CSS Grid Tutorial

Transitions Properties

CSS Properties with Examples

CSS Selectors

CSS Pseudo Elements

CSS Attribute Selectors

Input Pseudo Classes

CSS Examples

CSS Animation Projects