0

I'm trying to set a background image in my section tag on the home page of my website. It works with the following CSS, but the problem is whenever I scroll down and scroll back up, or refresh the page after scrolling halfway down (where the section that I set the background image is out of view), the image disappears (leaving the background to be white). If part of the section is still in view when I refresh the page, only that part of the image shows the image and everything above it turns white, leaving an empty gap where the rest of the image is supposed to be.

The weird thing is if I try to select the image with my mouse or do Control-A to select everything on the page, the parts of the image that are selected appear where it's supposed to be, which means it's there but just not showing up for some reason.

Here's my code:

HTML:

<section class="homePage"></section>

CSS: 

.homePage{
    background: url(../images/background.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}

What's the cause of this problem and what's the remedy?

user3226932
  • 2,042
  • 6
  • 39
  • 76
  • A fiddle demo would be helpful for us to understand. – Ganesh Yadav Sep 13 '15 at 16:43
  • Have you checked these 2 question? http://stackoverflow.com/q/9275802/2827823 and http://stackoverflow.com/questions/21588657/reload-backgrounds-to-fix-bug-with-chrome – Asons Sep 13 '15 at 16:47

2 Answers2

0

Specifying an absolute URL (starting with the site root /) for the background image solved the issue for me.

.homePage {
    background: url(/images/background.jpg);
}
Alex Yursha
  • 3,208
  • 3
  • 26
  • 25
-1

You just need to add background attachment.

background-attachment: fixed;
Yan
  • 431
  • 1
  • 4
  • 6