Step 14: Background Images
Adding background images gives the design an actual texture. It can be any image technique including shading, gradients, lighting, fading or anything else.
This site uses gradients and rounded corners for its background images as well as shadows. This step only shows the gradients and rounded corners.
There are nine background images added in this step. Three make up the top and right frame. One for each of the two header/tab colours, serving as both the gradient and the rounded corner. Two for each colour of the left div border, which must be an image in this design to preserve the rounded corner. Lastly, a background image gradient for the small buttons in the footer.
body {
background: #1B1F25 url(backr.jpg) repeat-y top right;
}
div.backt {
background: #bfb199 url(backt.jpg) repeat-x top left;
}
div.backc {
background: #bfb199 url(backc.jpg) no-repeat top right;
}
.text h2, .text h3, {
background:#2A4144 url(h2.gif) repeat-x top left;
}
.localtext h2, .localtext h3 {
background:#432D2B url(h2a.gif) repeat-x top left;
}
.text {
background: #000 url(/image/abs04/left.gif) repeat-y top left;
}
.localtext {
background: #000 url(/image/alt04/left.gif) repeat-y top left;
}
a.rss, a.rss:visited {
background: #F60 url(xmlbg.gif) repeat-x bottom left;
}
a.geourl, a.geourl:visited {
background: #009933 url(geobg.gif) repeat-x bottom left;
}
RSS