Background image sometimes not showing

Question

I have a problem with full width background image. Sometimes is loaded ok, but not always. Can I prevent this? Is possible, this is in the images size or file kind?

My css:

   .claim1{
       background: url(../img/naruc.jpg) center center fixed #222;
      -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
    display: block;
    height: 360px;
    position: relative;
}

Demo is here:

http://martinurbanek.cz/demo/bananaclouds_theme#claim1

Thanks forward for your help

Answer 1

I'm not being able to replicate your problem but I guess maybe you would be facing problem due to some CSS issues.

I suggest you use jQuery to set you background image as,

<script>
   $(document).ready(function(){
      $('myOjbect').css('background-image', 'url('../img/naruc.jpg')');
   });
</script>

The reason to use jQuery here is that the ready() function will be executed only after the entire document is loaded and hence it proves reliable.

Another reason for using jQuery is that it handles cross-browser issues very well and hence you don't need to add multiple lines to set the background image.

Answer 2

这可能会或可能不会影响任何东西，具体取决于您的设置，但是您是否尝试添加100％的width属性？

width: 100%;