» The Design of your Site: CSS Backgrounds- tutorial blog

The Design of a website is equally (if not more) important than its functionality and usability. It is fundamental for a successful website to be strong visually as well as foundationally.

Let’s take a brief moment to discuss the Sistine Chapel to illustrate my point. The Chapel itself was built to last and is foundationally sound. However, the Chapel is not famous merely because of its functionality. Michelangelo’s infamous painting rests on the chapel’s ceiling and leaves most in awe of artistic beauty. The result of this combination is quite simply one of the world’s greatest chapels.

Websites can exist relying on either the presence of grand design or fantastic code; but in order for websites to thrive it is essential to combine the two.

In this Post, I’d like to take a look at the important part of the Design and Coding equation with CSS; more specify the CSS background Property.

W3Schools defines the CSS Background Property as: “a shorthand property for setting all background properties in one declaration.” Note that most values found within the Background property can be used as their own property. The examples below will only be using the shorthand version of the Background Property. A disadvantage to using only shorthand is that it is not great for debugging or discovering spelling mistakes

Let’s begin by looking at the most basic value, one that should be first on every background property: Color.

body {
background: #000000;
}

Using simple Color Value, a background can be very plain and simple. This simplicity can be beneficial for many websites. Keep in mind that excellent design technique does not necessarily mean flashy images and Web 2.0 bevels everywhere. In addition to colors used in the background property, you can also use the value of transparent. The transparent value is mainly used on backgrounds within the site such as inside divs and tables and not commonly on a body background as found here.

The color value should always be an anchor point within your background property. Even if you have an image in your background that spans 1000+ pixels, you are still going to want to put a color value behind it so that while your background image is loading the user doesn’t see a stark white background on your nice dark website.

Next, lets discuss another important background value, especially in today’s web world, the background-image.

body {
background: #000000 url(images/yourimage.jpg) repeat fixed top;
}

Images can be used in a variety of different ways, and in conjunction with values like background-attachment, background-position, and background-repeat. There is no end to what you can do to your body background. While you can place an image into your CSS without adding these other values it is essential that the four values remain together.

The Examples above and below show just a few ways you can use the background-image value with the help of the background-repeat value. Simple patterned backgrounds with the background-repeat value set to repeat are illustrated above. More complicated versions of the value being set to repeat-x can be seen below. Centered images can be achieved by setting the value to no-repeat like the nice dark website, the background-repeat and background-image supported by the background-position and background-attachment values aid in highlighting your sites style.