CODEWITHSUNDEEP
htmlcsswebkit
Shawn Wernig
Shawn Wernig

Reputation: 1742

Webkit background image is clipped

I have a funny little problem.

I have a background image on my body element, and it loads like this in Webkit browsers (Chrome specifically).

Bad!

Resizing the window seems to fix this...

here is how it should look as intended:

Good!

CSS:

body {
padding-top: 360px;
font-family:Helvetica, Helvetica Neue, Arial, sans-serif;

background: url('images/page-bg2.jpg') no-repeat left center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Why is this happening and how do I fix it?

live site: http://www.healthfair.biz/

thanks guys!

Upvotes: 2

Views: 5179

Answers (1)

LorDex
LorDex

Reputation: 2636

I'd suggest to remove body padding-top (set th, and instead, use the same padding-top on div.wrapper. This should help.

Upvotes: 2

Related Questions