CODEWITHSUNDEEP
cssgoogle-chromehtmlbackground-image
furryLogic
furryLogic

Reputation: 21

div background image not displaying properly in chrome

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!

Upvotes: 0

Views: 1181

Answers (3)

Hexcede
Hexcede

Reputation: 131

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.

Upvotes: 1

Dhiraj
Dhiraj

Reputation: 1871

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

Upvotes: 1

AfromanJ
AfromanJ

Reputation: 3932

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.

Upvotes: 1

Related Questions