How to Add Image in Text Background using HTML and CSS ? Last Updated : 04 Jun, 2024 Comments Improve Suggest changes Like Article Like Report In this article, we will use HTML and CSS to set the image in the text background. To set the image in the text background, some CSS property is used. To add an image in the text background using HTML and CSS, create a container element (e.g., a `<div>`), set its background to the desired image using CSS ('background-image property), and adjust the text properties (e.g., color, size) to ensure readability. Use CSS positioning and z-index to layer the text over the image. Additionally, you can use 'background-size' and 'background-position' properties to control the image's appearance within the container. Example 1: html <!DOCTYPE html> <html> <head> <title> How to Add Image in Text Background using HTML and CSS ? </title> <style> p { background-color: #2f8d46; background-image: url( "https://media.geeksforgeeks.org/wp-content/uploads/20231218222854/1.png"); background-repeat: repeat; -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-top: 200px; font-size: 120px; text-align: center; font-weight: bold; text-transform: uppercase; font-family: 'Steelfish Rg', 'helvetica neue', helvetica, arial, sans-serif; font-weight: 800; -webkit-font-smoothing: antialiased; } </style> </head> <body> <p>GeeksforGeeks</p> </body> </html> Output: OutputExample 2: HTML <!DOCTYPE html> <html> <head> <title> How to Add Image in Text Background using HTML and CSS ? </title> <style> body { margin: 0; padding: 0; text-align: center; } h1 { display: inline-block; margin: 0; font-size: 400px; background-color: #2f8d46; background-image: url( 'https://media.geeksforgeeks.org/wp-content/uploads/20231218224644/w.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center; color: transparent; background-clip: text; -webkit-background-clip: text; } </style> </head> <body> <h1>GeeksforGeeks</h1> </body> </html> Output: Comment More infoAdvertise with us Next Article How to Add Background Image in HTML? R rumakr03 Follow Improve Article Tags : Web Technologies Web Templates Similar Reads How to wrap the text around an image using HTML and CSS? Here are three methods to make text around an image using HTML and CSS:1. Using Float PropertyThe float property is the traditional way to position an image and allow text to wrap around it.HTML<html> <head> <style> .image-left { float: left; margin-right: 15px; } </style> 2 min read How to Add Border to an Image Using HTML and CSS? Adding a border to an image means putting a line around the image to make it look better and more noticeable. To add a border to an image using HTML and CSS, we can use the <img> tag and apply CSS styles like border, border-width, and border color to customize the border's appearance.Syntax.im 1 min read How to Add Background Image in HTML? Adding a background image to an HTML page can enhance the visual appeal and provide a more immersive experience for your website visitors. The <body> background attribute is used to add a background image in HTML, but this attribute is deprecated in HTML5 and is not in use. In place of the bac 3 min read How to Add Background Color in Input and Text Fields using CSS ? In this article, we will explore different approaches to adding background color to input and text fields using CSS. Customizing the appearance of input and text fields is an essential aspect of web design, and changing the background color is a powerful way to enhance the visual appeal of these ele 2 min read How to Add Background Image in CSS? The CSS background-image property is used to add an image as a background to an element.Syntaxbackground-image: url()1. Setting background Image of an ElementA background image is added to an h1 tag using the URL.HTML<h1 style="background-image: url( 'https://media.geeksforgeeks.org/wp-content/up 1 min read How to Set Background Image in CSS? CSS (Cascading Style Sheets) can allow developers to set the background image for the web pages or specific HTML elements. This feature can help enhance the visual aesthetics of the website. The background-image property in CSS can be used to specific one or multiple background images to be applied 3 min read Like