Day 8 – Holiday Greetings

I noticed that for the past two projects, I was getting frustrated once I reached the css part, especially the positioning. For today’s project, I decided to focus on css positioning. I decided to have a fixed scene and then have items appear in the scene when the user scrolls down.

I found my background for the “fixed scene” by googling free clip art and backgrounds. Sometimes finding the right image takes a lot of time and makes you wish you could draw them yourself!

I chose this as my background.
I chose this as my background.

Two main things I learned today:
1. vw and vh

I used CSS3’s vh to set the height of the divs, one unit reflects 1/100th the height of the viewport so I set the height to 100vh. This set the height of the divs so that the user will always see the top scene before scrolling down and revealing the bottom scene.

These units can also be used to specify the content in a document. For example, I could set my images so that the height does not exceed the viewport by writing height: 85vh. (Not setting it to 100 gives the picture a little breathing room on the page.)

2. Creating a full page background

I thought I could simply set the background image of the first div but this does not take up the whole page (there are white spaces). I wrapped the background image in a div and made the div twice as big as the browser window. Then I gave the image a min width and height of 50% to preserve the aspect ratio.

Full background page
Full background page

After setting up the two divs, all I had to do was set the bottom div with relative positioning and then use absolute positioning to place the characters.

A lot of trial and error!
A lot of trial and error!

However, I ran into another problem when I realized that at different browser sizes, the images I placed on the trees would not be in the right places anymore. (This was because of how I set the full page background to scale to the viewport.) To fix this I placed a fixed tree in the top scene and then placed the items so that they would appear on the tree.

Tada!

Happy Holidays!
Happy Holidays!
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