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 Image in Text Background using HTML and CSS ? 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 a Login Form to an Image using HTML and CSS? The login form on an Image is used on many websites. Like hotel websites that contain pictures of the hotels or some organizations that organize special events holding that event picture and login form. In that case, you can design a login or registration form on that picture. This design will make 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 filter to the background image using CSS? Adding filters to background images using CSS allows you to apply visual effects like blur, grayscale, brightness adjustment, and more without modifying the actual image file. CSS provides a set of filter functions that can be applied to elements with background images. This approach enhances design 3 min read Like