Having added all of the CSS-generated styling, we need to think about any graphics we'll be using that can't be generated by CSS.
The beauty of CSS3 is that it reduces the need for these graphics, as we no longer need to create background images for gradients, rounded corners, or shadows. But there are some elements of our design that can't be handled by CSS.
We already have a number of images ready to import into our theme—you'll find them in the code files that go with this book.
Tip
Our theme makes extensive use of background images to avoid any problems with inline images conflicting with any other content that our theme's users may add in future. You may prefer to use inline images in your markup, which has the advantage of being better for accessibility and SEO but the disadvantage that if a future user of your theme edits the template files, he or she may accidentally delete images that are required for the design. Our images are for design only and not part of the content, so we're using background images.
We've exported our logos to one single image. Using the background-position property we'll be displaying the different sized logos depending on which screen size triggers our media query.
Note
Wellstyled has an excellent tutorial on how to use a single image technique (also referred to as "CSS sprites") to handle image background rollovers with CSS: http://wellstyled.com/css-nopreload-rollovers.html.
You can also check out CSS Tricks, and their article CSS Sprites: What They Are, Why They're Cool, and How To Use Them at http://css- tricks.com/css-sprites/.
Remember: To see the full and final CSS mockup style.css and index.html page, please refer to the code download section in the preface.