Layered background approach abandoned

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).

screenshot

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s