CSS Background Properties

The background attribute in CSS can be very useful, and allow you to do some creative things with your site. With CSS you can have the background repeat if you want, or you can center the background if desired. The best thing about the background attribute is that it is very simple to use.

<style
body{ background-color: #000000;}
</style>

That style will only make the background black, not that great but it is a start. This also will effect the entire page, since we are applying this to the body element. We can apply the background attribute to other elements also like div elements. Let's look at some of the other properties of the background attribute, then we will look at setting a fixed background on a textarea tag.

Background

This is a short hand, and allows you to set multiple property values with this one attribute.

Background Image

The background-image attribute, allows the coder to set the background based on an image. Below is an example of this attribute, you will notice that you have to use url() when using this attribute.

background-image: url(location/to/the/image);

Background Attachment

This attribute only has two values that can be assigned to it, scroll and fixed. Scroll is the default value that is set. This will allow the background to scroll when the element is scrolled. If set to fixed, then the element will stay in the same location even when the element has been scrolled.

Background Color

Background color sets the color of the background for the element. The format that the color code has to be either transparent, RGB, Hex, or one of the 255 default HTML color names. If you are not use to using RGB format, this is what it looks like rgb(255, 255, 255). This would make the background white. With RGB you are adding red, green, and blue into the color with a number value between 0 and 255.

Background Position

The background position allows you to align where you background is located in an element. You can use percents, pixels (or any other CSS units of measurement), and words such as top left. If you only use one word, for example top, then center is applied to the second word by default.

Background Repeat

As the name suggests, this attribute allows you to change how the background repeats. By default the value is set to repeat, but you can also set it to no-repeat, repeat-y, and repeat-x. No-repeat will make the image never repeat. Repeat-y will repeat the background only on the vertical axis, and repeat-x does the same thing on the horizontal axis.

Now that we know more about the background attributes, lets create textarea element. Here is the CSS code that we will be using.

<style>
textarea {	
 background: url(images/code-sucks.gif) center fixed; 
}
<style>

This will set our background in the center of the text area element. We then set the background to a fixed position so that if the user scrolls the text will scroll over the background. Below is an example of what the textarea would look like.