Positioning a text over an Image using CSS / HTML

#css #html #webdev #beginners

Starting off we'll use this simple html layout, start by changing the img src to the image you will be using.

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<link rel="stylesheet" href="style.css">
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Text over img</title>
	</head>
	<body>
	<div class="content">
	<img src="img.jpg" />
	<div class="text"><h2>Lorem ipsum dolor sit.</h2></div>
	</div>
	</div>
	</body>
	</html>

view raw htmllayout1.html hosted with ❤ by GitHub

and we will also be using this css stylesheet.

	.content {
	text-align: center;
	position: relative;
	}

	.text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	}

view raw style.css hosted with ❤ by GitHub

Now we have a text in the center of this image.

A text-shadow can sometimes make the text more visible. Another way to make the text more visible is to add a box around your text with a low opacity.

CSS for the box

	.box {
	background-color: white;
	opacity: 0.5;
	border-radius: 25%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 20%;
	height: 20%;
	}

view raw style.css hosted with ❤ by GitHub

Wrapping the Image and Divs with this box class

	<div class="content">
	<img src="img.jpg" class="ree" />
	<div class="box">
	<div class="text"><h2>Lorem ipsum dolor sit.</h2></div>
	</div>
	</div>

view raw htmllayout1.html hosted with ❤ by GitHub

Feel free to ask if you have any questions!

Fast, Lean, and Fully Extensible

CKEditor 5 is built for developers who value flexibility and speed. Pick the features that matter, drop the ones that don’t and enjoy a high-performance WYSIWYG that fits into your workflow

Start now

Top comments (5)

******* • Sep 5 '19

is it easier to place text over an image to place on the site or jsut placing the image as bg and then the text on a top layer?

Hammed Oyedele • Sep 6 '19

Using image as backgrounds sometimes would not show some part of the image, so in that case overlaying text is the solution.

Wicked Foster Child • Jan 20 '20 • Edited

Hi @drinkmeasap
I tried to follow your suggestions as closely as I could for my website but the text is never inside the image, would somebody please point out what I've done wrong?

thepracticaldev.s3.amazonaws.com/i...