CSS Background

CSS Background

The background of your website is very important, so please spend some time with this tutorial. If you are aiming for a professional website, a good rule of thumb is to use a light background with dark text. However, if your just making a website for pleasure, then any kind of color combination is acceptable.

With CSS, you are able to set the background color or image of any CSS element. In addition, you have control over how the background image is displayed. You may choose to have it repeat horizontally, vertically, or in neither direction. You may also choose to have the background remain in a fixed position, or have it scroll as it does normally. The following examples will show you how to implement all of these options.

CSS Background Color

As you have seen throughout Hiscript Tutorials, many different background colors are present. These varying backgrounds were obtained without using tables! Below are a couple examples of CSS backgrounds.

h4 { background-color: white; } 

p  { background-color: #cccccc; } 

ul { background-color: rgb( 149, 206, 145); } 

 

In the above example we used three different formats for defining a color: a color name, hexadecimal values, and RGB. Check out the the list of supported color names. Hexadecimal form is a pound sign (#) followed by, at most, 6 hex values (0-F). RGB defines the individual values for Red, Green, and Blue. Example form: rgb(Red, Green, Blue); with the range of 0-255 for each value.

CSS Background Image

Need an image to repeat left-to-right, like the gradient background that appears at the top of Hiscript.com? Or maybe you would like to have an image that remains fixed when the user scrolls down your page. This can be done quite easily with CSS and more, including:

1.      choosing if a background will repeat and which directions to repeat in.
2.      precision positioning
3.      scrolling/static images

Lets begin with a default CSS background image.

p { background-image: url(Pic.jpg); }

h4{ background-image: url(http://www.hiscript.com/photo/htmlc.jpg); }

 

Background Image Repeat

You can have a background image repeat vertically (y-axis), horizontally (x-axis), in both directions, or in neither direction.

p {  

    background-image: url(smallPic.jpg); 

    background-repeat: repeat; }

h4 {  

    background-image: url(smallPic.jpg);

    background-repeat: repeat-y;}

ol {  

    background-image: url(smallPic.jpg); 

    background-repeat: repeat-x;}

ul {  

    background-image: url(smallPic.jpg); 

    background-repeat: no-repeat;}

 

CSS Fixed Background Image

You may choose to have your background scroll naturally, or to have it in a fixed position. Note: This feature does not work properly in most browsers when placed within a textarea, except Internet Explorer 6.0, which displays it correctly.

textarea.noScroll { 

    background-image: url(smallPic.jpg); 

    background-attachment: fixed;

}

textarea { 

    background-image: url(smallPic.jpg); 

    background-attachment: scroll;}

 

CSS Background Image Positioning

If you would like to define where exactly an image appears within an HTML element, you may use CSS background-position. Please take note that there are three different ways of defining position: length, percentages, and keywords. We recommending using lengths -- specifically, pixels.

p { 

    background-image: url(smallPic.jpg); 

    background-position: 20px 10px;

}

h4 { 

    background-image: url(smallPic.jpg); 

    background-position: 30% 30%;

}

ol { 

    background-image: url(smallPic.jpg); 

    background-position: top center;

}

 

Note: When using pixels, the location of the image will be (A)px from the left of the screen and (B)px from the top of the screen, where A and B are integers. Note: When using percentages, the location of the image will be (A)% from the left of the screen and (B)% from the top of the screen, where A and B are integers. Note: Available positioning keywords are: top, right, bottom, left, and center.

CSS Gradient Background

If you would like to create a gradient background like the one that appears at the top of Hiscript.com, you must first create an image inside a painting program (Photoshop, Draw, etc) like the one you see below.

Notice that the image is very slim. We are going to be tiling the image horizontally, so you can make the image skinny as possible. As long as the image is 1 pixel or wider, you will be fine.

Using the repeat attribute, we set the value to repeat-x which causes the image to span left to right across the specified element. This example adds a gradient background to the paragraph element.