This week found me focused on the resizing of text over images.  The problem I have been having is that my text is supposed to sit on my images and resize with it.  When I get the size right, the text doesn’t resize with the browser.  Here’s an example of the original version, before my solution.  The issue could be solved by creating lots of media queries, but this means a lot of extra code and a lot of visual “jumps” when as the user resizes.  My solution meant that I used a unit called, “vh.”  Here’s an example of my solution (go ahead and resize the browser).  Here’s an example of the code I used:

#home div.overlay-box > p {
    font-size: 1.5em;
    font-size: 2.4vh;
    margin-top: 12px; 
    margin-top: 2vh;
}

First I set the size for browsers that don’t support “vh” then I readjust the size utilizing the vh suffix.  If you’re interested in vh & vw check out this article. What vh does is calculate the viewport height and calculate that into units.  Each vh is worth 1% of the height, making my 2.4vh above equal to 2.4% of whatever the browser height is.  This allows me make the text appear to move with the image in the background.  In order to make the background image resize based on height, and to repeat along the x-axis I used the following code:

.container > #home {
    background-image: url(../img/01_bg.jpg);
    -webkit-background-size: auto 100%;
    -moz-background-size: auto 100%;
    -o-background-size: auto 100%;
    background-size: auto 100%;
    background-repeat: repeat-x;
    background-position: center center;
}

The last thing I did on the site was create an animated modal window that will display more information about the pages if there is any.  Currently, the “i” in the green circle along the right hand side of the screen activates he modal.  Here’s the working example.