Pro CSS3 Animation

ChApter 8 ■ IntegrAtIng CSS3 AnImAtIon wIth reSponSIve weB DeSIgn AnD JAvASCrIpt

Listing 8-4. A Responsive Background Image

html, body { min-height: 100%; font-size: 62.5%; }
body { background-image: url(fog.jpg); background-size: cover; }

Combined with some body text, this gives the effect shown in Figure 8-3.

Figure 8-3. A responsive background image

For other ways to “transition” background images, see Chapter 3.

Resizing Elements in Responsive Web Design with Transitions

It’s entirely possible to transition elements between @media query breakpoints. From a design perspective, the
major issue to be aware of is the element’s potential “jump” between states on viewport resize, which may be
surprising to the user.
Let’s create a design that has a large h1 element in the middle of the page, above a photograph (Listing 8-5).

Listing 8-5. HTML for a Responsive Background Image and Transitioned Text

body { background-image: url(fog.jpg); background-size: cover;
background-repeat: no-repeat; color: #fff; font-family: Avenir, Arial, sans-serif;
}
h1 { font-family: 'Calluna Sans', Arial, sans-serif; text-align: center;
font-size: 10rem; margin: 8rem auto;
}

As the viewport narrows, the heading text will naturally break at spaces, as shown in Figure 8-4.