Line25

---

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 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 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 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 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. Designing an Infographic with HTML, CSS & jQuery Spice Up Your Web Typography with @Font-Face Design & Code a Cool iPhone App Website in HTML5 Top 5 Web Design Debates That Cause the Most Riots

You are subscribed to email updates from Line25 To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610