Time for action – adding background images to our design

The images we've created need to be added to our stylesheet as background images.

  1. In your stylesheet, edit the 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; 
}
  2. Now add the following new section below your 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;
}
  3. Save your style.css file.

What just happened?

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.

..................Content has been hidden....................

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