Issue with iphone homepage background image too large

Hi,

I've a website up and running at http://www.hamiltonsthoughts.com 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(http://hamiltonsthoughts.com/wp-content/uploads/2015/03/davidhammyhome.jpg) 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