Using Background Graphics in a Website

Designing a nice background for your website is an important detail that can add a lot of polish to your design. Considering that you do not know what sort of monitor people will have when viewing your site, you must account for all scenarios. While it’s important to ensure that all main content and navigation fits within a 1,000-pixel-wide space, what happens to your site when it’s viewed on a large cinematic monitor? Here are a few suggestions and examples for you to consider:

  • Pick a solid, complimentary background color. At the very least, choose a solid color for your site’s background that compliments the design. Don’t just leave the background white because you simply forgot about it. If white is appropriate, then choose white.

    Generally, more muted colors are better. If someone widens the browser window and gets a blast of bright orange, it’s probably not the best user experience.

  • Use a repeating background tile. Create a small graphic (can be any size, actually) that can seamlessly repeat across and down the page.

    There’s a bit of a trick to making a pattern that has no visible seams. Use Photoshop to place four copies of your tile end-to-end around the original tile’s perimeter to see how all the edges line up. The advantage to using tiles is that regardless of whether you’re using CSS code or HTML, one relatively small graphic is all it takes to fill a large area. This saves on download time.

  • Create a background tile that is a long, skinny horizontal strip. With CSS, you can determine that a pattern repeats in just one direction: either x (horizontally across the page) or y (vertically down the page). If you create a tall, thin strip, say a gradation, you can have it repeat across the page only. You should then compliment this by setting a solid background color that matches the bottom color of your tile. That way, if users scroll down the page, they cannot see where your tile ends and the background color begins.

  • Create a background tile that is much larger than your web page. Many people think of background tiles as small, square graphics that work like a floor tile in a house. This isn’t necessarily true. You can create a background tile that is (a) much larger than your web page, (b) is of any proportions, and (c) doesn’t even repeat. This is a great way to create an “environment” behind your website, and reveal a nice surprise for people who widen their browser windows.

    A thin, decorative background tile repeats across the Hong Kong Disneyland website, ending in a col
    Credit: © Disney
    A thin, decorative background tile repeats across the Hong Kong Disneyland website, ending in a color that exactly (seamlessly) matches the underlying page color.
blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.