I spent a few hours this afternoon creating separate Divs for each of the layered background elements, each with a different z-index assigned, and could not find a way to have the sun appear in front of the sky but behind the hills if the hills and sky were both set as background images. I liked the idea of having the hills as a background image so that I could easily repeat them on the y-axis, but in the end decided that I would have to create an image the length of the containing div (1300px).
Whilst copying these Vector images into Photoshop for use on the web page, I learned that the files needed to be saved as PNG-24 format. PNG-8 did show the transparency OK, but leaves a white pixelated border around the image,
Once I had done this, I was able to have the sun rise up from behind the hills, and some clouds that move slowly from right to left.
I have one cloud image which I use a few times varying the position, width, height and speed. I’d be interested to know if the browser only needs to call the image from the server once (and is therefore a more efficient way of displaying various clouds as opposed to calling three seperate clouds of varying sizes).
While on the subject of creating a site that is as ‘size-efficient’ as possible, I have now realized that I do not need to have an image for the sky, I can just use a background:linear gradient on the container div instead.
Next up – to create a wooden frame for the site. At this stage I have no idea how I will achieve this or whether it will look effective. I’ll start by checking out some Youtube tutorials on creating a wood effect on Illustrator.