CSS Image Code

This page contains css image code. Feel free to copy and paste the css image code into your own website, blog, MySpace page, or other HTML document. And feel free to modify the code as you wish.

Also, please consider keeping the link back to this website - if you do it will be very much appreciated!

The image codes on this page are CSS image codes. That is, codes that use CSS (Cascading Style Sheets) to add the image. CSS image code is limited to adding a background image. To embed an image into your content, use this HTML image code.

About CSS Image Code

When you use CSS to embed an image into your HTML document, you use the background-image property. As you may suspect, this adds a background image to an HTML element.

Adding a background image can be useful - especially when you want to add a layer of text or other content over the top of the image.

Here's an example of using CSS to add a background image to a web page:

No Repeat Image

You'll notice that the above image repeats vertically and horizontally. That is, if the HTML element is larger than the background image, it is repeated again and again until it fills the total background area. You can use the background-repeat property to indicate whether the background image should repeat or not, and how it should repeat.

Here's an example of specifying that a background image should not repeat. We do this using background-repeat: no-repeat.

You can also use CSS image code to specify that a background image can repeat only horizontally or vertically. See HTML background image for more on background images.

CSS Shorthand Image Code

If you intend on creating lots of background images and other background effects, you'd best use the background property. This is a shorthand property that allows you to set all your background properties at once.

Again, you can see this at the HTML background image page.

CSS List Style Image

You can use CSS image code to use images for the bullet points in your lists. As long as you have a location for the image, you can use it as a bullet point.

To use an image in your lists, use the list-style-image property. You can add the property to the whole list (i.e. to the ul tag), or to each individual list item (i.e. to the li tag).

Here's an example of using one image for all list items:

And here's an example of using a different image for each list item: