Inserting Images Tutorial
This tutorial will explain the background-image CSS property further, along with several properties that are used to support this property for displaying images.
Using the background-image: url(IMAGEURL); property isn't enough to display the image. The height and width property are needed to display the image.:
Properties Used:
First figure out the exact height and width of the image in pixels and replace 100px with the actual height and width. So if the height of your image is 200px and the width is 500px then you'd change height: 100px to height: 200px and width: 100px to width: 500px.
Now decide how you want the image to repeat. If you want it to repeat only one time, use this property:
Your CSS should look like this:
background-image: url(IMAGEURL);
height: 100px;
width: 100px;
background-repeat: no-repeat;
}
If you want it to repeat in a horizontal direction only, use this property:
Your CSS should look like this:
background-image: url(IMAGEURL);
height: 100px;
width: 100px;
background-repeat: repeat-x;
}
If you want the image to repeat vertically only, use this property:
Your CSS should look like this:
background-image: url(IMAGEURL);
height: 100px;
width: 100px;
background-repeat: repeat-y;
}
If you are using the image as a repeated background image then omit the background-repeat, height and width properties.
Your CSS should look like this:
background-image: url(IMAGEURL);
}