How To Place Text on Image using HTML and CSS?
To place text on an image using HTML and CSS, you can use different techniques to make the text look good and easy to read. Here, we will explore two approaches for placing text over an image using simple HTML and CSS.
1. Using Absolute Positioning
This approach uses absolute positioning to place the text directly on top of the image. The container that holds the image is positioned relatively, while the text is positioned absolutely inside it, allowing precise control over the text placement.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.gfg {
position: relative;
width: 100%;
text-align: center;
}
.text-container {
position: absolute;
color: rgb(255, 255, 255);
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: rgba(41, 41, 41, 0.8);
padding: 0.5rem;
text-align: center;
font-size: 16px;
}
</style>
</head>
<body>
<div class="gfg">
<img src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
style="width: 50%; height: 60vh;">
<div class="text-container">
<h3>Sample</h3>
<p>Mountains Image with river</p>
</div>
</div>
</body>
</html>
Explanation
- Container Setup: The .gfg class is set to position: relative so that the .text-container can be positioned absolutely within this container.
- Text Styling: The .text-container uses position: absolute to overlay the text on the image and is centered using left: 50%, top: 50%, and transform: translate(-50%, -50%) for horizontal and vertical centering.
- Background and Padding: A semi-transparent background (rgba) is added to the text container for readability, with padding to create space around the text.
Output
Place Text on Image using HTML and CSS
2. Using CSS background-image Property
In this approach, the image is used as a background for a div, and the text is overlaid within the container. This is useful when you want the image to cover the entire container, and you want to have flexible control over the text overlay.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
position: relative;
width: 400px;
height: 300px;
background-image: url("https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png");
background-size: cover;
background-size: 100% 100%;
color: white;
text-align: center;
line-height: 300px;
}
.text {
background-color: rgba(0, 0, 0, 0.5);
font-size: 20px;
font-weight: bold;
padding: 10px;
}
</style>
</head>
<body>
<center>
<div class="container">
<div class="text">Text on Image : (GeeksforGeeks)</div>
</div>
</center>
</body>
</html>
Explanation
- Background Setup: .container uses background-image to set the image, with cover to fill the space and center for alignment.
- Text Styling: The text is styled with a semi-transparent background (rgba) and line-height for vertical centering.
- Flexibility: This method allows easy control of text and image positioning.
Output
Using CSS background-image Property
Place Text on Image using HTML and CSS – FAQ’s
Can I place multiple text layers over the same image?
Yes, you can add multiple text elements inside the container and position them differently using CSS.
How do I make the text responsive for different screen sizes?
Use relative units like em or % for font sizes, and apply media queries to adjust the styles for different screen widths.
Can I animate the text over the image?
Yes, you can use CSS animations or transitions to add effects such as fading in, sliding, or scaling the text.
Is it possible to make the background image partially transparent?
You cannot change the transparency of a background image directly, but you can use a semi-transparent overlay with rgba colors.
Can I use these methods with background videos instead of images?
Yes, similar techniques can be applied to background videos using a <video> element or a video background setup.
