background image with gradient

by Pritam Bohra

HTML

<div class="image">
	<div class="text">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse corporis atque ipsam repellendus excepturi exercitationem aperiam quibusdam sapiente fuga, quidem id ex dolores quis, vitae accusamus quasi expedita est quam enim alias eligendi. Quibusdam autem earum modi officiis, aut facere hic voluptas minima ex expedita praesentium, amet, temporibus, necessitatibus ab.</p>
	</div>
</div>

CSS

html, body {
	height: 100%;
}
.image {
	width: 500px;
	height: 100%;
	background-image: url("https://picsum.photos/200/300");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: 100% 100%;
}
.text {
	height: 100%;
	padding: 20px;
	font-size: 1em;
	font-weight: bold;
	line-height: 1.5;
	color: white;
}

.text {
	height: 100%;
	background: rgba(70, 130, 180, 0.4);
}