CODEWITHSUNDEEP
javascripthtmlcss
Darshan Kini
Darshan Kini

Reputation: 110

css loads background image in chrome but not in firefox

I have developed one website which run smoothly in chrome. but it has issue in firefox. It wont able to load the background image. I don't understand why this happen.Please Checkout in chrome and firefox

CSS

#background {
  position: fixed;
  z-index: 1;
  background: url("../img/bg/photo_bg.jpg") 50% 50% no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  display: inline-block;
}

Upvotes: 0

Views: 224

Answers (2)

Nikhil Nanjappa
Nikhil Nanjappa

Reputation: 6632

If you remove the display: inline-block property itseems to work on both Chrome & FF.

background {
    position: fixed;
    z-index: 1;
    background: url("../img/bg/photo_bg.jpg") 50% 50% no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    /* display: inline-block; -- remove this */
}

There seems to be no other difference if you remove the property, so was there a reason why it was used in the first place?

Also just a note, I noticed there was a media only screen and (-webkit-min-device-pixel-ratio: 1.5), not all, not all rule used which effects ONLY the chrome/safari browsers.

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), not all, not all {
  #background {
    background: url(../img/bg/photo_bg_%402X.jpg) 50% 50% no-repeat;
    background-size: cover;
  }
}

Upvotes: 2

Clément Yvetot
Clément Yvetot

Reputation: 41

You should set the display to "block".
It should be working with that.

Upvotes: 0

Related Questions