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

This may or may not affect anything depending on your setup but have you tried adding a width property of 100%?

width: 100%;