The images we've created need to be added to our stylesheet as background images.
STANDARD STYLING
section to add background images and colors, with the following code. Best practice is to add each declaration within the description blocks you've already set up. You can see the final code in the code files of this chapter.header{ background: url(images/osmag-logos.png) no-repeat 0 0; } #mainNav li a:hover{ color:#088fff;} #across{ border-top: 2px solid #444; background: #000 } #container{ background: url(images/osmag-container-bg.png) no-repeat 50% -30px; } #container2{ background: url(images/osmag-earth.jpg) no-repeat 50% 0; } h2.thisMonth{ color: #fff; } h2.pastIssues{ color:#222; } article h2{ background: url(images/pngs/highlight-border.png) repeat-x 0 bottom; } .comments{ background: url(images/pngs/comments-icon.png) no-repeat 0 0; }
STANDARD STYLING
section:/*------------------REUSABLE GRAPHIC TREATMENTS -------------------*/ /*reusable image backgrounds*/ .img-quote-light{ background: url(images/pngs/r-quotes-light.png) no-repeat -10px -7px; text-indent: 55px; } .img-quote-dark{ background-image: url(images/pngs/r-quotes-dark.png); background-repeat: no-repeat; background-position: -10px -7px; text-indent: 55px; } .img-bottom-shadow{ background: url(images/pngs/bot-r-shadow.png) no-repeat 50% bottom; } .img-top-shadow{ background: url(images/pngs/top-r-shadow.png) no-repeat 50% 0; } .img-line-hz{ background: url(images/pngs/highlight-border.png) repeat-x left bottom; }
style.css
file.We added CSS for backgrounds and colors into our stylesheet. As you'll notice, we made a lot of use of no-repeat
to ensure our background images didn't repeat, and used positioning of background images to place them in our design.
Now let's add any changes needed for those backgrounds to our media queries.