CODEWITHSUNDEEP
htmlcssmacosgoogle-chromebackground
Theo Bearman
Theo Bearman

Reputation: 79

Background Issue on Chrome Mac OSX 10.9.5

I have a website at http://www.ucsmun.co.uk that displays perfectly on Chrome on a windows machine but looks like this on Chrome on a Mac computer.

Image here

The white area cuts off half of the background image.

What do I do to fix this? I have this CSS for the background as follows:

   html,
     body {
     height: 100%;
   }

And:

    #headerwrap {
background: url(../img/back.jpg) no-repeat center center fixed;;
margin-top: 0px;
padding-top:120px;
text-align:center;
background-attachment: relative;
background-position: center center;
min-height: 700px;
width: 100%;

-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Thanks in advance for any help!

Upvotes: 0

Views: 869

Answers (1)

5tormTrooper
5tormTrooper

Reputation: 923

Add the following rule to the #headerwrap div

height: 100%;

If I open up devtools on your site and put it in, it works. See screenshot. There is no whitespace at the bottom of the window.

Example

Upvotes: 1

Related Questions