Randomizing Background Image & Color

[Venetia]

Alright so I've found code that randomizes the background image of a page. And I've found code that randomizes the background color of an image. But I haven't found a code that randomizes a combination of a color AND an image.

Let's say I want a page to have a red gradient image background adjusted, repeat-x, spanning across the top. But the image is only so tall and the page background color needs to be red, too.
But on refresh I want the image to be a green gradient, and the background color to be green.

It seems so simple yet I can't figure it out. I'm trying to mostly only use CSS here but I assume this is going to require PHP. I WON'T use javascript because it can be blocked.

An example of a PHP rotator is here: http://host.sonspring.com/css-rotator/
But it only rotates images, not colors. (And obviously it does it in a div, when I'd want it in the body).

I guess I can part with this web design idea if I have to but darn it seemed like a good idea.

Before I scrap this design idea altogether, can anyone point me in the right direction here?

 

[Brewmeister]

Hmmmm.... let the air out of the tires. could you make the images really long (tall) so that the background is part of the image & changes with the image?

 

[9robin3]

No one really understands your problem? More explanation maybe? Sorry for askin but also, is it nessecary to RANDOMLY chose a background? :biggrin:

 

[DeM0nFiRe]

Now, do you want it to change the tint of the picture at random, or do you have images that have certain tints and you just want the background color to match the tint?

If it is the former, then you need to use GD, which is the image manipulation library for php. There are also some higher level libraries written on top of GD to make it easier to work with.

If it is the latter, then you will just have to make a list of images and a list of colors that match up to each other. Then based on the random index, you generate the CSS to set the body background-image and background-color.

To confirm your suspicions, you cannot do this with just HTML and CSS. All those languages can do is change the look and layout of the page, they can't do any logic like generating random numbers.

EDIT: Actually, if you wanted to get fancy, you could also us GD to automatically detect the color tint (By getting the average color of all the pixels) but that's pretty heavy, when you can just give it a list of colors and images.

 

[Ellie]

I might be talking crap here, but what I would do is this:


<link rel="stylesheet" type="text/css" href="mystyle<?php echo rand(1, 3); ?>.css" />

And then have

mystyle1.css
mystyle2.css
mystyle3.css

 

[DeM0nFiRe]

I might be talking crap here, but what I would do is this:


<link rel="stylesheet" type="text/css" href="mystyle<?php echo rand(1, 3); ?>.css" />

And then have

mystyle1.css
mystyle2.css
mystyle3.css

Oh, heh, that's a good point. It's not pretty, but it would work. I guess she's probably not going for conventional correctness >.>

 

[Venetia]

yeah I don't give a shit about being elegant with the code.

anyway I didn't want to make the background images crazy tall, because for scrollable pages, it may still visibly repeat-tile, and look horrible. also, it increases the filesize of the image (bleh).

and no I definitely wouldn't want anything to adjust the hue FOR me, this is a graphic design gallery--it's got to be about LOOKS more than function.

I like Wyatt's idea about randomizing style sheets. That sounds like a good ticket, and I'll give it a whirl. I could do some interesting things with that, like having the logo change to match or matching hyperlinks, etc. Interesting :D