I have a large background image (3600x1600) for my website which I want to use at this resolution to cover pretty much all screens up to 2k.
However, my dilemma is that this image includes sky in it and the top 1000 or so pixels are literally just sky, meaning that at 1080p, all you can really see is the sky in the image, due to the fact that the browser will start the image at the top of the page and expand down as your resolution gets larger.
I need the background-image to stick to the bottom of the page and expand upwards as opposed to downwards, so all resolutions can see the city in the image and then the sky covers larger resolutions.
I've tried a few different things, scaling background to 100% using CSS3, which due to the aspect ratio of the picture leaves a white gap at the bottom of the page at 16:9 and the position "bottom" tag, just puts the bottom of the image at the top of the page which is ridiculous...
Any ideas of how to do this or if it is possible at all? Thanks.