Issue with iphone homepage background image too large


I’ve a website up and running at but have an issue with how it looks on the iphone – the background image of the homepage becomes huge and you have to keep scrolling down and down to get to the articles. So I’m looking for help to stop this happening.

On the emulators I see nothing wrong, it’s only on the actual iphones I notice the problem. Reproducible on iphone 4 and 5.

This is the CSS being used:

.header-image {
background: url( no-repeat #111;
background-position: center top;
background-size: cover;
.header-image {
height: 100vh;
border-top: solid 1px #999;
border-bottom: solid 1px #999;
top: 0px;
left: 0px;
right: 0px;
z-index: 1;
position: relative;

I believe it either has something to do with background:cover or the height:vh but I can’t figure it out. Any help would be much appreciated if you’ve come across this issue before. Thanks