vinay kapoor vinay kapoor - 2 months ago 11
CSS Question

To set the background image in wrapper class

I write these code and made 2 grid using bootstrap.Now i want to the backgound image in the wrapper class.I tried it but i din't get success. Any idea about this?

enter image description here



.wrapper {
background-image: url(http://www.steamatic.com/images/footer-pattern-grey.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}

<div class="wrapper">
<div class="col-md-6">
<div class=" flex">
<div class="media-left"> <i class="fa fa-home fa-3x"></i></div>
<div class="media-body">
<h4>Resenditial Services</h4>
</div>
</div>
<p class="para">Steamatic knows that the health and safety of your family is your first concern. Our restoration and cleaning services are all about providing you with the healthiest indoor environment possible.</p>
</div>
<div class="col-md-6">
<div class=" flex">
<div class="media-left"> <i class="fa fa-building fa-3x"></i></div>
<div class="media-body">
<h4>Commercial Services</h4>
</div>
</div>
<p class="para">We've been providing commercial clients money-saving and asset-protecting services for nearly five decades. Steamatic's full range of restoration and cleaning services means we have your business covered.</p>
</div>
</div>





I get the image in my background but i want to get full width image what i do?
U can show the image i upload

Answer Source

If you read the documentation of bootstrap, the cols are always wrapped in a row , if you want to wrap it in your own .wrapper class, then add

.wrapper{
  overflow: hidden;
}

or you can try float: left; to .wrapper , its your choice