CSS Backgrounds

CSS or Cascading Style Sheet is a computer language that is used in describing the way that a document would appear as a web page. It is mainly concerned with the appearance and the format of the document. Right now, the most common use for CSS is for creating the style and appearance of Web pages.

CSS Backgrounds

CSS backgrounds are utilized for defining the way that the backgrounds of some elements would look. There are several things that backgrounds can determine. Here are some of the properties for which CSS can be used:

    • Background color
    • Image for the background.
    • Background repetition.
    • Background attachments.
    • Background location and position.

 

CSS Code Examples

We have included here a few examples of a few CSS codes that are used for determining the factors that we have just enumerated.

CSS Property Background Color

Background color is used for specifying the color of the background that is going to be used for a portion or a document or a page. Background color can be determined by different values. It can be determined by a HEX value – such as "#ff0000". There are two other values that can be used for determining background color and these are RGB value or simply through color name. An example of RGB value determining background color would be "rgb(255,0,0)".

Here are some code examples:

div  {background-color:#6495ed;}

h1 {background-color:#e0ffff;}

p {background-color:#b0c4de;}

CSS Property Background Image

In determining the actual image of the background the ‚background-image’ property is going to be used. The way that CSS is set, the image is going to be duplicated so that it would cover the whole element. That is the default setting, but there can be changes to it as well.

In setting up the background image for the page that you are working on, it can be set up like this:

body {background-image:url('book.gif');}

CSS Property Background Image

It has been mentioned earlier that CSS actually repeats the image to cover the whole web page. It will do so both vertically and horizontally. There are cases though when the image to be used for the background would not look right when repeated in a certain way. There are images which would look right when repeated in a vertical manner but not when that is done horizontally. There are images for which the opposite is true. In those cases the code should specify as to the manner by which the image ought to be repeated.

In this code the image is going to be repeated both horizontally and vertically:

body

{

background-image:url('paper2.png');

}

 

This can be changed so that the image would only be repeated:

body

{

background-image:url('gradient2.png');

background-repeat:repeat-x;

}

 

In this case “repeat-x;” would mean repeating the image horizontally. This is different from the default in CSS which is to repeat the image both horizontally and vertically.

These are just a few of the basic things that you should know about CSS backgrounds. Using this knowledge, you can be sure that the web page that you are creating would look right.