CSS and HTML 5 – Text Overlay on Images

Eli the Computer Guy *NEW, CSS and HTML 5

You can overlay text over images using CSS. To do this you essentially create a DIV as a canvas, add an image, and then code where the Text should start to be printed within the DIV.

overlayStyle.css

img {
	width:100%;
    	height: auto;
}

.textOverlay {
  	position: relative;
  	width: 300px;
  	height: auto;
  	margin-left: auto;
  	margin-right: auto;
}

.overlay-title {
  	position: absolute;
  	top: 0px;
  	left: 16px;
	color: white;
	background-color: lightgrey;
}

.overlay-date {
  	position: absolute;
  	bottom: 5px;
  	left: 16px;
	color: white;
}

overlay.html

<html>
<head>
<link rel="stylesheet" href="overlayStyle.css" />
</head>
<body>

<div class="textOverlay">
<img src="picture700.jpg">
<h1 class="overlay-title">Title: Cool Pic</h1>
<p class="overlay-date">Taken: July 4, 2011</p>
</div>
<br>

<div class="textOverlay">
<img src="picture700.jpg">
<h2 class="overlay-title">Title: Another Cool Pic</h2>
<p class="overlay-date">Taken: August 12, 2015</p>
</div>

</body>
</html>

picture700.jpg