CODEWITHSUNDEEP
htmlcsstwitter-bootstrapmicrosoft-edge
Marios Nikolaou
Marios Nikolaou

Reputation: 1336

Background image size doesn't fit properly on Microsoft Edge

I have an issue with background image that doesn't fit well ,in chrome and mozilla works fine but in the Microsoft Edge the image doesn't cover the div element.

<style type="text/css">
   .BackImg{
    background-image:url('background.jpg');
    background-repeat: no-repeat;
    background-size:cover contain; //doesn't work in microsoft Edge as the chrome or mozilla
    padding: 10px;
   }
  </style>

 <div class="container-fluid">

    <div class="row">
     <div class="col-sm-6 col-md-6 BackImg">
       <h2>Header 2</h2>
       <div class="row">
           <div class="col-sm-6 col-md-6 innerDiv">
             <p>Inner div</p>
           </div>
       </div>
     </div> 
    </div>

Thanks in advance.

Upvotes: 0

Views: 3345

Answers (1)

Martin Beeby
Martin Beeby

Reputation: 4599

In the css background-size property you should use just cover, or just contain. Not both.

Cover will cover the background whilst contain is a similar effect but could result in white space.

Upvotes: 2

Related Questions