How can I write text on image

!-- Container Start -->

<div id="container" style="display:none;" class="animate-bottom">

			<div class="row">
			<div class="col-12">
				<div id="bg"><img src="1280x850.jpg" alt="readMore">
				<div class="readMore-box">
					<a href="#logo"><nav class="readMore">read more</nav></a>
					<div class="arrowDown"></div>
				</div></div>
			</div>
			</div>

#container {
	position: relative;
	width: 100%;
	max-height: 100%;
	height: auto;
	margin: 0;
	padding: 0;
}

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

.readMore-box {
	height: 100px;
	padding: 10px;
	text-align: center;
/*	border: 1px solid white; */
	background: red;
	z-index: 100;
}

nav.readMore {
	background: #000000;
	border: 1px solid #ffffff;
	color: #c2a75d;
	margin: auto;
	padding: 10px;
	width: 150px;
	text-align: center;
	transition-duration: 0.4s;
}