An In-Depth Look into CSS’s Background Attribute

This is the first part in a three part series. Today we will be covering the Background attribute. The second article will cover the border attribute, and finally the third article will cover the font attribute, so be sure to subscribe to catch the other two articles.

A little bit of “Background” (* Pun Intended *)

The Background attribute is probably the most frequently used attribute in CSS. In this article we will cover the different properties that go with the background attribute, and how to use them correctly. We will also have a showcase at the end of the article of sites that have used the attribute to it’s fullest potential.

Overview

There are 5 properties available in CSS2 relating to the background attribute.

• background-color : Set’s a solid background color to the given element
• background-image : Specifies an image to set as the background of an element
• background-position : Set’s the position of the image that was set
• background-repeat : Determines whether the image is tiled or not
• background-attachment : Specifies whether an image scrolls with the page or is in a fixed position

Usage of basic properties

Background Color

The background-color property sets a solid color for an entire element. Here are some of the different values you can use to define the desired color.

background-color: #2bb7da;
background-color: red;
background-color: rgb(145, 100, 140);
background-color:  transparent;

Background Image

The background-image property specifies an image on the server or locally to place as the background of the specific element.

background-image: url(path to image);

background-image: url(logo.png);

There is a huge advantage of using the background property to call in your images because it makes it harder for the “Average Joe” to take the pictures from your site. For example if you place an image in an IMG tag in your html I can right-click it and save it, if you put it in your CSS using a div and the background image property then it would be much harder for me to get to that image. So in other words it adds extra security to your images.

Background Position

The background-position property specifies where your background image should be placed in your elements background.

background-position: 50px -10px; /* Moves image to the right 50px and up 10px */
background-position: 0% 50%;
background-position: center center;
background-position: 0% 70%;

Background Repeat

The background-repeat property specifies whether or not your background image tiles and if so how to tile. This property should only be used in conjunction with the background-image property or it will have no effect.

background-repeat: repeat; /* Default value for bg images */
background-repeat: repeat-y; /* Tiles image vertically */
background-repeat: repeat-x; /* Tiles image horizontally */
background-repeat: no-repeat; /* Stops tiling */

Background Attachment

The background-attachment property is not one that you see often in CSS code. It defines whether the a background image scrolls with the page or stays in a fixed position when scrolling.

background-image: url(logo.png);

background-repeat: no-repeat;
background-attachment: fixed;

Background Attribute Shorthand

Shorthand it!

Instead of declaring each one of these properties seperately we can save a lot of time by using the shorthand for the background attribute.

background: color image position attachment repeat;

background: #fff url(logo.png) 50px -10px scroll no-repeat;

Beautiful Uses of the Background Attribute

Here are a few sites that have really nailed the use of background images in there web design.

Web Designer Wall

Nick La creator of Web Designer Wall does an amazing job on his blog with background images. He uses multiple background images to create an astonishing effect.

Web Designer Depot

Web Designer Depot also does an amazing job of using elaborate background images to enhance the user experience.

PSD Vibe

PSD Vibe uses subtle background images that blend in with the solid background color of the site.

Thats All

As web designers and developers we must learn to use the background attribute and all it’s properties to the fullest. If you enjoyed this post please bump, re-tweet, moo, etc…

Written by Shane Jeffers

Shane Jeffers is the Creator and Author of Three Styles. He has a unique passion for design trends and tutorials. Reach him through the Contact page or follow him on twitter @ThreeStyles