Dynamic Background Images

Hello everyone! I'm currently working on a new template for my website that utilizes png transparency. I'm interested in (I know it's nothing new) adding a small submenu that has links to change the background image when the visitor clicks them.

So... heh, if you haven't guessed my question. I was hoping someone would help me make this dream a reality. Though it's still in visual development (aka: haven't even started coding it yet) I figured I'd open this inquisitive thread now to have as future reference when I do start it within the next few days or so.

(I'm also unaware of whether this is a css or a php oriented thing. My sites as of late I've managed to do entirely in divs but am completely oblivious to any php. So if it does use that, I apologize in advance for any confusion I may have.)

Any help would be greatly appreciated.

#458462

This is done with Javascript and different CSS files (though I'm sure there are other ways).

Here are the results of a Google search. A List Apart (the first result) is always a good source, and I see there's a PHP method (JavaScript-free) three links down.

Post back if you need help!

-NC

P.S: Of course, your different stylesheets would be similar except with different background-image elements. However, now that I think about it, that's probably overkill. There's a Javascript method where you can change the class (or id) of a single element, which makes more sense if you're only going to change a single line in your CSS file. There are, of course, accessibility arguments about relying too much on Javascript. It's up to you.

#458527

I'm currently working on a new template for my website that utilizes png transparency.

just to let you know. PNGs are handled differently in different browsers. in firefox, PNGs work beautifully, yet in IE, they get an odd gray color, in the areas which are supposed to be transparent.

i recommend you use, GIFs they are handled the same way across all browsers.

#458635

@rammass18: I'm aware that IE doesn't properly display PNG images unless the user modifies it. All of my previous layouts avoided PNGs for such reasons but I think to really impress someone with my creativity I'm gonna try to utilize that and at best, maybe encourage a few people that my site is a worthwhile reason to start using firefox. I do however make sure to use pngs only when necessary and gifs for everything else to help with the page load time.

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

In other news, everything is turning out beautfully. The swapping stuff after a bit of trial and error functions well, however I've run into another (kind of unrelated to this topic title) predicament.

My entire site is contained within an aptly named "container" div. In one particular alternate background style I'd like to display a div with a background image into a fixed position that appears UNDER my website. As a layer would in photoshop. Ive got it to appear, and in place But it's on top of my site. I've toyed around with different display options as well as the z-index but I may have done it incorrectly. How would I go about achieving this?

Thanks in advance.

Oh, and P.S. Thanks for searching with the correct terminology, NC. Things have gotten smoothly underway in that aspect.

EDIT!!!!

I figured it out! I had to change my "container" position value from static to relative and the z-index worked.

#458649

Glad to see all your problems have been solved .

-NC

#458662