div背景图片无法在chrome中正确显示

Question

I'm helping a designer friend with a problematic page and it's throwing me for a bit of a loop as well. There should be 4 divs throughout the page with a background image and text. The page displays as expected in IE and FF but in chrome only the div that's visible on load displays it's background image. Additionally, the others will display if you highlight the space they should occupy.

I created a scrubbed version of the page as an example: http://furrylogic.net/playground/rose/example.html

Any feedback or suggestions would be greatly appreciated. THANKS!

Answer 1

I think this is going to be down to poor markup.

Example with your <div id="hope"> :

Currently

<div id="hope">
    <div class="hinside">
        <center>
           <p></p>
           <h1 style="color: rgb(255, 255, 255); text-transform: uppercase; opacity: 1;" data-    sb="fadeInDown" class="sb-effect-displayed animated fadeInDown">You are Loved!</h1>
           <p>&nbsp;</p>
           <p></p>
        </center>
    </div>
</div>

Could be simplified to:

HTML

<div id="hope" class="banner-image">
    <h1 data-sb="fadeInDown" class="sb-effect-displayed animated fadeInDown">You are Loved!</h1>
</div>

CSS

.banner-image {
    width: 100%;
    margin: 20px 0;
    padding: 0;
}
.banner-image h1 {
    text-align: center;
    margin: 80px 0;
    padding: 0;
    text-transform: uppercase;
    color: #fff;
}

This is just to get you on the right track, note I have removed the empty <p> tags and padding from the <h1> . I can give a working example if you provide a JsFiddle .

Answer 2

Remove background-attachment: fixed from all those ids ie #time, #bible, #hand and #hope. If that doesn't work, just let me know. :)

Answer 3

Change the <h1></h1> tags to <h1><font id="h1"></font></h1> tags with the style or css on #h1 . For some weird reason some browsers don't display p and h1 tags properly which the font tag sometimes eliminates. Also I would suggest using font instead of p to eliminate those line breaks some browsers put in.