How to use CSS background-image In CSS
In this approach, we are using CSS background-image to place text blocks over an image. Here we set the image as the background of a container element. The text block is then placed inside the container.
Example: The example below uses CSS background-image property to place text blocks over an image.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<style>
.container {
position: relative;
width: 350px;
height: 300px;
background-image: url(
'https://media.w3wiki.org/wp-content/uploads/20240513173522/GfgImage.png');
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
}
.text {
background-color: rgba(0, 0, 0, 0.5);
color: white;
padding: 10px 20px;
font-size: 18px;
}
</style>
</head>
<body>
<div class="container">
<div class="text">
This is w3wiki logo
</div>
</div>
</body>
</html>
Output:
How to Place Text Blocks Over an Image using CSS?
Placing text blocks over an image is a common technique used in web design to create visually appealing layouts. Here, we will explore different approaches to achieve this effect using CSS.
Below are the approaches to place text blocks over an image using CSS:
Table of Content
- Using Absolute Positioning
- Using CSS background-image