background image

I know how to set a background image.

And I know how to make it repeat.

But how do I make it work with a pattern of images (same size and everything)?

I have three images and I want them to alternate for the background. If I set them all as the background, it seems to just pick the top one. :'C

I'm pretty sure you can't have multiple background images. Try editing them together in the pattern you want in paint or whatever you use and then use that as your background.

If what you mean is "how can I have all of my background images show up plus all repeat somehow?" then that would be pretty confusing. I mean, how do you want them to repeat, anyway? If they all repeat both ways, they'll cover each other up.

Here's a code for a basic background image in CSS.

#apple {
display:block;
background-image:url(images/apple.png);
width:31px;
height:42px;
}

Click to expand...

See where it has width and height? If you change those to be bigger than the image itself, it should repeat in the extra space. So if you have an image that's thirty pixels wide and you change the width to sixty pixels, you should see two if it.

You can also add

left:42px;
top:0px;

Click to expand...

Which will tell it exactly which pixels to be at on the page. In that way, you can do all the crazy repeating you want wherever you want.

If it's not your only background image, though, you'll have to use an HTML code to tell it how to be there. If you don't, your page will think you don't want it and leave it out.

<div id=apple>

And then apple shows up! Hooray!

-------------

But since you said "alternate", maybe you actually mean "how can I have it so that sometimes image1 is the background, sometimes image2 is the background, and SOMETIMES image3 is the background?"

And in that case, you could do it one of two basic ways.

The easiest way would be to make it cookie based, so that when someone visits, they can choose whichever background they want. People do their best to make it sound complicated, but it's actually really easy and I can give you the easiest code I know of if that's what you're doing.

It basically says "if user clicks bluestyle button, switch to bluestyle.css and use everything from that file instead of from defaultstyle.css".

Or you can have it change randomly. That's harder, though, and probably more annoying for the visitor unless the images are pretty similar. Also people usually use Javascript for random things, and then what if your visitor has Javascript turned off and it messes up your website for them?