webkit browser doesn't completely load image

I'm building a site for a client and i've come across an issue where in a webkit browser the images dont fully load. so chrom开发者_如何学运维e and safari, on mac and ipad. http://coatesconstruction.co.uk

I've done some research previously and i found an article suggesting that webkit browsers open multiple connections up per image to download them and i wondered if this couldnt be the issue.

one of the aims with this site was to make the right column fluid, such that if the user resized the browser the image showing grew, which has meant the backend is saving images at 1600px wide and im using width: 100% to make them autosize to the left column. This means the images are pretty massive on the server, is it anything to do with the size which is stopping chrome and safari from showing them?

It does load the entire image.

You have messed up somewhere in the CSS code and that's why the entire image doesn't show up on Webkit browsers.

Try setting div#col1's height to 656px (or what ever height you want!) and you will see the entire image.

um, the images are loading fine, the issue is that you're cropping them :)

.col1, .col2, .col3 {
    overflow: hidden;
}

Since all your images have position:absolute set, they won't force the parent container to get any larger, so your parent is stuck at 124px high.

.leftmenu .col1 {
    height: 765px;
}