|
CSS Tip:
Non-Tiling Background Images
by Larisa Thomason,
Senior Web Analyst,
Keynote NetMechanic
When a plain white or other solid background color doesn't create the effect you want, you can always use a background image on your page. But a background image included using basic HTML may look unattractive when it tiles (repeats itself on the page). You can use style sheets to control the placement and display of background images.
Use The "no-repeat" Option
You can add a background image to the BODY tag of your document using basic HTML like this:
<body background="bgImage.jpg">
But like most HTML formatting techniques, you don't have much control over how that image displays for your visitors. Check out this sample page for an example. The background image tiles (or repeats) on the page and fills the available space in the browser window.
Cascading Style Sheets (CSS) give you the ability to stop the tiling effect by using the "no-repeat" value:
<style type="text/css">
body
{
background:url(bgImage.jpg) no-repeat;
}
</style>
Now check this sample page and resize it. See the difference?
Other Style Options
The simple example above may be all you need, but probably not. The background image will display in the top left corner of the browser window and that's not always the ideal location. You can use the "center" option to center the image on the page:
<style type="text/css" >
body
{
background:url(bgImage.jpg) no-repeat center;
}
</style>
Note that this centers the image on the whole page (except in Netscape 4.7, which doesn't support the "center" value). If your page is quite long then visitors may not see the background image until they scroll down the page.
It's a good idea to also use a complementary background color even if you expect the background image to fill the browser window. Remember that images take longer to load than color (which is rendered by the browser). A complementary background color avoids an ugly flash of a contrasting color before the image displays. Our story on Background colors and images contains some good examples.
Just include the complementary color value inside the background style definition.
<style type="text/css" >
body
{
background: #31CEFF url(bgImage.jpg) no-repeat center;
}
</style>
And beware of using large, fat images as your background. After you add the background image, check your page download time using the Load Time Check feature of HTML Toolbox. It will alert you to slow-loading pages that may drive visitors away from your site.
Be Careful With Background Images
A nice background image can make a page stand out from the crowd. But be careful not to let it interfere with the actual content on your page. Be sure there's good contrast between text on your page and the background image or color.
That's important for overall page accessibility and usability. If visitors can't easily read your page content, they'll quickly jump to a more useful site.
And one last thing: don't get so excited by graphics that you forget what's really important about your page - the content. Never include important information inside images unless you've also put it in text format as well.
Search engine spiders use text content to index and rank your page. Visitors with disabilities listen to page content with screen readers. Images can make your page look attractive to visitors, but good content is what will get them to your page and keep them there!
|
