How To Write Text Over an Image in HTML With CSS

December 28, 2020 admin

In this tutorial, we are going to see how to write text over an image in HTML with CSS. You can use the positioning methods in combination with the margin property in CSS to position or place text on an image.

CSS Code:

.container {
    display: inline-block;
    position: relative;
}

.container .text {
    background: rgba(0, 0, 0, 0.8);
    z-index: 1;
    position: absolute;
    text-align: center;
    font-family: Georgia;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 30%;
    color: white;
    width: 70%;
}

HTML Code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Write Text Over an Image in HTML With CSS</title>
		<style type="text/css">
			/* Put the CSS Style Here */
		</style>
	</head> 
	<body>
		<div class="container">
			<img src="https://1.bp.blogspot.com/-w-wLWap_ydk/XSZZ3wSKtcI/AAAAAAAAFFY/-BWB5LvxBA0imZ8uMw-XvTmsw8k7Pk1uQCLcBGAs/s400/test1.jpg">
			<div class="text">
				<h1>Flowers</h1>
			</div>
		</div>
	</body>
</html>