CODEWITHSUNDEEP
htmlcssimagegoogle-chromefirefox
Kadin
Kadin

Reputation: 13

My background image displays in google chrome but not in firefox

Can someone help me understand why Chrome but not Firefox is able to display the background image of the tree on the right side and how to fix: www.eye45.com

When the web browser is contracted, both 

<div class="col-sm-6 left-side">
<div class="col-sm-6 right-side">

are supposed to maintain the same height until @media (max-width: 780px) {} and then the tree image is supposed to flip under the purple paragraphs and reduce to a height of 200px.

It works perfect in Chrome, but not Firefox.

Upvotes: 1

Views: 500

Answers (4)

Townim Faisal
Townim Faisal

Reputation: 325

it's a height problem in chrome browser. use this 

.right-side {
  min-height: 500px;
}

Upvotes: 1

Mukesh Ram
Mukesh Ram

Reputation: 6328

Try using equal height columns bootstrap css in your code.

Reference : http://getbootstrap.com.vn/examples/equal-height-columns/

.left-side {
  background: #bbb4e5 none repeat scroll 0 0;
  color: #fff;
  display: table-cell;
  padding: 2%;
}
.right-side {
  background: url("https://s3.amazonaws.com/igd-wp-uploads/2014/05/Perfei%C3%A7%C3%A3o-Igni%C3%A7%C3%A3o-Digital.jpg") no-repeat 50% center / cover ;
}
.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row row-eq-height">
  <div class="col-sm-6 left-side">
    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
  </div>
  <div class="col-sm-6 right-side">

  </div>

</div>

Here is demo : http://codepen.io/anon/pen/jrJBzz

Upvotes: 1

Siraj Hussain
Siraj Hussain

Reputation: 874

Adding style with display as table will fix this for firefox.

.right-side {
    display: table;
}

Upvotes: 2

Annalaxmi
Annalaxmi

Reputation: 133

Add style="display:table"

<div class="col-sm-6 right-side" style="display: table;">
        </div>

Upvotes: 1

Related Questions