index.html

<!doctype html>
<html lang="en-us">
	<head>
		<meta charset="utf-8">
		<title>ImageBlock</title>
		<link rel="stylesheet" href="/src/css/image-block.css">
		<style>
		html, body, .image-block {
			height: 100%;
			margin: 0;
			padding: 0;
		}
		</style>
	</head>
	<body>
		<div class="image-block">
			<img class="image-block-bg landscape" src="https://placehold.it/1600?text=img" alt="placeholder">
			<div class="image-block-content">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores cupiditate ratione autem qui magnam quibusdam quidem sit sunt commodi, ut illum quo repudiandae animi quae mollitia in beatae dolore amet.</p>
			</div>
		</div>
		<div class="image-block">
			<svg class="image-block-bg landscape" viewBox="0 0 1600 1600">
				<rect width="1600" height="1600" fill="#c1c1c1"/>
				<text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle" font-family="sans-serif" font-size="120" fill="#8f8f8f">svg</text>
			</svg>
			<div class="image-block-content">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores cupiditate ratione autem qui magnam quibusdam quidem sit sunt commodi, ut illum quo repudiandae animi quae mollitia in beatae dolore amet.</p>
			</div>
		</div>
		<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
		<script src="/src/js/image-block.js"></script>
	</body>
</html