Set Image as Background for Text using CSS

byCodingFlicks -September 02, 2021

0

Hello friends, in this blog, we will share a simple snippet about how to put an Image in Text using the CSS background-clip property. In this blog, I have shared many snippets on CSS Animation Examples, HTML CSS, Bootstrap, JavaScript, jQuery plugins implementation etc. Please Make sure to check those by clicking the load more button underneath the Homepage.

In Webdesign, we sometimes need an image to be a background in a particular text. If we don't want the full background for the container but the text-only then we have to use the 'background-clip: text' CSS property. Here using the property, we can make the background clipped underneath the text we are using. Although the color of the text needs to be transparent if we want this CSS property to work. Normally all major browsers support the 'background-clip: text' property if we use the correct vendor prefix. For Firefox & Edge support, we can use the property directly. for Chrome & Safari support, we have to use '-webkit-background-clip: text'.

HTML:

<!DOCTYPE html>
<html lang="en">
<!--codingflicks.com-->
<head>
    <meta charset="UTF-8">
    <title>How to Set Image as Background for Text</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body> 
    <div class="wrapper">nature</div>
</body>
</html>

CSS:

body {
	background: #0E0E0E; 
}
.wrapper {
	background-image: url(https://cdn.pixabay.com/photo/2017/01/19/23/46/church-1993645_960_720.jpg);
    background-position: 20% 20%;   
	background-repeat: repeat;
    -webkit-background-size: cover;
	background-size: cover;
	text-align: center;
	text-transform: uppercase;
    position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	font-size: 339px;  
	font-family: 'Poppins', sans-serif; 
	font-weight: 900;
	-webkit-text-fill-color: transparent; 
	-webkit-background-clip: text;
	white-space: nowrap;	 
}

Thank you for visiting the blog today.

Please do not enter any spam link in the comment box.