I am currently using the bootstrap4 framework to build this page, and I would like to incorporate a blue background color to the div that has the "globe-img" class. I attempted to achieve this by wrapping the content in an inner div (an overlay), but it resulted in breaking the grid layout completely. Is there a way to apply the background-color without adding extra markup?
html, body {
margin:0;
padding:0;
}
.globe-img {
background: url('http://binarytheme.com/BTlivedemos/2014/10/20/blue-landing/assets/img/earth.jpg') no-repeat center center;
-webkit-background-size: cover;
background-size: cover;
min-height: 400px;
}
.smicon {
border: 1px solid #fff;
height: 80px;
width: 80px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid globe-img">
<div class="row">
<div class="col-md-6 offset-md-3">
<h1 class="text-center text-white text-uppercase pt-5 pb-4">Design my way</h1>
<p class="text-white">Nunc at viverra risus. In euismod quam ac dictum varius. Nunc at viverra risus. In euismod quam ac dictum varius. Nunc at viverra risus. In euismod quam ac dictum varius. Nunc at viverra risus.</p>
</div>
</div>
<div class="row">
<div class="col-md-3 d-flex flex-column align-items-center">
<i class="fa fa-android fa-3x text-white smicon rounded-circle d-flex align-items-center justify-content-center my-5" aria-hidden="true"></i>
<p class="text-white">Android</p>
</div>
<div class="col-md-6">
<img class="img-fluid" src="http://binarytheme.com/BTlivedemos/2014/10/20/blue-landing/assets/img/new-i.jpg" alt="">
</div>
<div class="col-md-3 d-flex flex-column align-items-center">
<i class="fa fa-apple fa-3x text-white smicon rounded-circle d-flex align-items-center justify-content-center my-5" aria-hidden="true"></i>
<p class="text-white">Iphone</p>
</div>
</div>
</div>
</body>
</html>