Time for action – adding background image styling to the media queries

We'll need to edit the two media queries for the two smallest screen sizes.

  1. Inside the media query targeted at small tablets and phones in landscape—@media (min-width: 480px) and (max-width: 800px)—add the following code. Again, you'll find you can add it to your existing declarations.
    header{
  height: 100px; 
  background-position: 0 -220px;
}
#mainNav{
  top:100px;
}
#mainNav li{
  background: url(images/pngs/highlight-border.png) repeat-x 0 bottom;
}
#container2{
  background-position: 70% -90px;
}
  2. Next, in the media query targeting small screens—@media only screen and (min-width: 320px) and (max-width: 480px)—add the following code:
    header{
  height: 70px; 
  background-position: 0 -425px;
}
#mainNav{
top:70px; 
}
#mainNav li{
background: url(images/pngs/highlight-border.png) repeat-x 0 bottom;
}
#mainNav li a{
padding: 10px
}
  3. Finally, save your stylesheet.

What just happened?

We loaded our graphics into our STANDARD STYLING rules and then moved on to each media query, modifying the height, background-position and other visual properties as needed along the way. Most notably, we changed our header height and, using the CSS sprite technique, our logo loaded up with the different sized logo as our screen dimension changed.

Our final desktop layout now looks like the following screenshot:

What just happened?

Our final portrait tablet layout now looks like this:

What just happened?

And last, our final phone layout now looks like this:

What just happened?
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset