Learn HTML Onlinetutorials for beginners

In this tutorial we’ll go over some of the CSS features that can be used with background images.

Let’s take a look at some of the properties of the background.  In the examples we will be using, we will be experimenting with the background effects of the body tag.  A thing to keep in mind is that background effects can be applied to other elements besides the body tag.

Let’s start off with this example:

Here’s what we have so far:

Our focus will be within the style tags.  We will be experimenting with the styles of the body.

We also have a div tag in this example.  The div tag is a block-level element.  We can put anything we want in it.  We could place text or images in it.  We can create our website layout with nothing but div tags.  We’ll go into all of that in a future tutorial.  For now, we are using a div tag for the sake of demonstration.  Our div will be  700 pixels wide, 1000 pixels in height, have a background color of white, and be aligned in the middle of the screen.

Background Color

Here we have simply declared that our background will be a blue color.

Background Image

Now we have an image displayed as our background.  A thing to keep in mind is that the image of the stars is 200×300.  The browser will fill in all of the background with the tiles of the space image.

What if we only want to display one tile of the space background?  That’s no problem.  In fact, we can declare where we want the space image positioned on the page.

Here we use no-repeat so that the space tiles do not fill the background of the page.  We position the space image on the center left of the page.  Being that the image is in a fixed position, the image will not move.  Try removing fixed.  Now the image is truly on the center left of the page.

Vertical and Horizontal Background Images

At first this concept might not make sense.  But suppose you have a gradient background (We are referring to an image of multiple colors blending with each other.  You’ll see a gradient background in a minute).  Your gradient background does not have to be a large image file.  It can be a very small file and still fill the entire background of the page.

Here we add a horizontal gradient background.  To declare horizontal and vertical positioning of an image, we use the x and y coordinates concept.  Here we used repeat-x for the background image to tile itself horizontally.   You don’t have to use fixed.  Try removing it and see what happens.  The background image is not long enough.  Sometimes you have no control over how long the web page is going to span.  This is a perfect example for using fixed.

If you have an image that you would like to repeat vertically, simply use repeat-y.

The Fixed Background

You probably know where this is going.  That’s good though if you know about the fixed background.  In the older days of HTML, fixed didn’t exist.  If you had a large image for a background, the image would repeat itself when the web page began to span.  This was real ugly.  Using a fixed background gives many creative opportunities.

This line of code will display an abstract background image.  The background will never move when the page spans.

Final Word

We covered some of the basics of css backgrounds.  You have a foundation of how backgrounds work.  There’s still some more things you can do with backgrounds that we didn’t go over.  But for the most part we covered the fundamentals.  Go on ahead; be creative and experiment with backgrounds in the examples we worked on.