MULTIPLE BACKGROUND IMAGES

You can add one image and have it display multiple times by using the background-repeat property. If you don't specify, the image is set to repeat, but you can specify if you want it to repeat horizontally, or vertically. This is a way that you can add an image: You can put a class on an element, I named my class exa1
Now you create a css file to work with your background images and add an image.
.exa1 {background-image: url("small.png"); }
On this same area, you can specify if you don't want it to repeat by adding:
background-repeat: no-repeat;
You can also do the same for your body element or any element without adding a class. The class would be added if you wanted to do a different background for each of the same type of elements. For instance, you could add the same background to all p elements, or to the whole body. But if you want different backgrounds for two different paragraphs, you would then specify a class for each one. If you are adding the same background to all the elements of one kind, you would not put a . before the element. you would just write in:
h1 {background-image:...

Example 1




Adding One Image, you can specify no-repeat.

Example 2




Adding One Image, don't specify anything and it will repeat, vertically and horizontally.




Example 3




Repeating only horizontally









For repeating only horizontally, you would add the code .exa1{background-repeat: repeat-x} Change the x to a y and it would repeat vertically.

Example 4




Repeating only vertically









You can also define where you want your image to be on your screen. You can add in background-position: 10px 15px; for instance. Depending on what you want to do, you can define it with %, px, em, or you could tell it to go top, center, or right. The first value you define is for horizontal, the second is for vertical. So with the example above, it would be 10 px to the right,and 15 px down from the top left of the screen. Here is a chart that helps show what you can do to change the position of your pictures: Resize your Images

You can use shorthand so you don't have to type in so much. If you do this, you will want to stay in the correct order.

  1. color
  2. image
  3. repeat
  4. attachment
  5. horizontal position
  6. vertical position

An example shorthand code can look like this: .alert{background: #FFFFCC url('alert.png') no-repeat scroll 10px 10px;}

You can add multiple images to your background. To do this, you separate the values by a comma. For example, you can type in
background-image: url(moon.png), url(heart.png), url(smile.png);
background-position: center center, 20% 80%, top left;
background-repeat: no-repeat;
Look at Example 5 to see what it looks like.

        Example 5




   Multiple Background Images









You now know how to add multiple background images to your site. The rest is up to creativity and putting the images exactly where you want them. You can make them larger or smaller or do what you want with images.