web 2.0

Monday, May 24, 2010



Basic Web Page Background Techniques with CSS

Posted: 24 May 2010 12:00 AM PDT

The good old background property is one of the core elements we can play around with in our web designs. Here’s an overview of the four most common approaches to styling your web page body, from the basic solid colour through to large detailed background images. If you’re just starting out in web design, you’ll find some basic CSS techniques for you to put into practice into your future projects.

Single colour background

Example of a single colour background

 body { 	background-color: #a1bad1; } 

You can’t get much simpler than a single colour background for your website. Browsers will default to white, but you can specify your own background colour for your page body.

Repeating background pattern

Exporting a background pattern

Example of a repeating background

 body { 	background-color: #a1bad1; 	background-image: url(images/pattern.png); } 

Repeating patterns and textures come in all kinds of styles, from a simple and subtle noise texture, right through to complex and ornate patterns. By default a background image will repeat in both the X and Y directions, so there’s no need to tell it to in your CSS. Remember to make sure your background image is seamless, otherwise you’ll see ugly lines where the image repeats. Despite a repeating background image covering the whole web page, you should still set a background colour, just in case the user doesn’t have images enabled in their browser.

Horizontally repeating background

Exporting a background gradient

Example of a horizontally repeating background

 body { 	background-color: #a1bad1; 	background-image: url(images/gradient.jpg); 	background-repeat: repeat-x; } 

Backgrounds in CSS can be repeated on just the X or Y axis. Using repeat-x is commonly used to add a gradient to web elements, especially on elements used as buttons. A thin clipping of a gradient image can be set as a background image of the body, which when repeated will spread across the whole page. By default the image will be positioned at the top of the page, but center or bottom could also be used. The background colour of the page should be set from the lowest most tone in the gradient to allow for a seamless transition from background image to CSS background-color.

Large background image

Exporting a background image

Example of a centrally positioned background image

 body { 	background-color: #a1bad1; 	background-image: url(images/bg-image.jpg); 	background-position: center top; 	background-repeat: no-repeat; } 

Backgrounds don’t have to be small image files that are set to repeat, you can also get away with some pretty large graphics. While the filesize of a large background image will be higher than a small repeating graphic, with careful image compression you can tweak it to something perfectly usable. It doesn’t matter how large your background is dimensions wise, as background images don’t inflict scrollbars, the larger the browser window the more the image the user will see. Large background images should still fade out to a solid colour, to allow that seamless transition. This example uses a large graphic that is positioned centrally at the top of the webpage.


Post a Comment