Background question

Hello,

I made this little page recently:

/jm.htm

But the guy wanted to rotate the background, so the blue is on the left and the red is on the right. The thing is I have no idea how to make this in HTML or CSS.

It seems so easy to do, but I didn't find any info on the wec website.

If anyone knows how to do this, I'll be thankful :o

I don't think its possible since its a fixed image and the transformer image is also a jpg. If it were a gif with a transparent background, it may be possible to code in Javascript + CSS (DHTML) to change the background.

It's amazing that something that seems so easy, like rotating a background, is impossible to do with the basic tools.

Anyway, for the transformer, I can make it a gif. Could you direct me to a website that has the JS you are talking about?

I also got an idea I could try out when I'll be home.

Im not sure if this will help, but it seems to be what you are looking for: http://www.mtholyoke.edu/help/creating-pages/style/dw/rotate.shtml

Or maybe I got confused with the rotating feature you're aiming for? Is it that you want the background, currently blue at the top and red below to rotate to blue left and the red right?

Or have 2 different images to randomly rotate as in switch backgrounds as convex7 has posted? If its the former, why not just use photoshop to change it? I'm a little confused ;)

No, no sidez, you were correct.

I want the background to be blue on the left and red on the right, lol.

Sorry convex7 if I wasn't clear enough, but that's not what I was talking bout. Thanks for submitting something though.

I guess the best way is just to edit it in photoshop. Easiest way without any coding.

Ah ok, i misunderstood the question. The easiest way is to use Photoshop as Sidez suggested.

Yeah, that's the easy solution. But how big shall I make it? Should I make the image fit for 1024x768 screens, or 1600x1200? That's my problem with using only an image.

Here's a suggestion ;)

Split the image into 2, save it as 2 separate transparent gifs or each with the appropriate background color. Create a page with 100% table width and height with 2 columns. Set the cell alignment as needed and the set the cell background to the needed color. Put each image inside.

This way, no matter which resolution the user is, it'll still be at the same position. Here's an example I made .. http://sidez.net/tmp/heart.html