How to use background-image In CSS
In this approach we are using CSS background-image property to place text over an image. here we will create a box and inside box we create a text element and then we set the image background for box container. This will place the text over an image.
Example: To demonstrate using background-image property to place text over an image using CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.Box {
width: 350px;
height: 300px;
display: flex;
background-image: url(
'https://media.w3wiki.org/wp-content/uploads/20240330112115/gfg-gg-logo-100.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: 350px;
align-items: center;
justify-content: center;
}
.txt {
color: black;
font-size: 22px;
/* margin-top: 60px; */
text-align: center;
}
</style>
</head>
<body>
<div class="Box">
<div class="txt">
w3wiki
</div>
</div>
</body>
</html>
Output:
How to Place Text Over an Image using CSS?
Placing text over an image is a common design technique used to create visually appealing layouts. It is often used in websites and applications to add context or highlight important information.
Below are the approaches to placing text over an image using CSS:
Table of Content
- Using absolute position
- Using background-image