Slide Background with AnythingSlider

I need to slide a background 开发者_如何学Pythonwhen clicking the "next" arrow, and the "previous" arrow - right now the background is in the #container element - However, that doesnt work - I've tried putting the background on the ul#slider element - But that doesnt work either...

What i need is that the background will be slider as much as the liinside the slider...

Any suggestions on how to do that ?

You can see the project here: http://www.i-creative.dk/Slider/

thx

I've built something like what you're asking for, and it's a total pain.

The problem is, you're talking about having a different background image, the size of the page, for EVERY slide.

2 options are: 1: Have one BIG background image, with all the background aligned horizontally, and animate the css background-position when you change a div, to keep things matching. This ahs the advanatage that only one image needs to be downloaded, but it will be big. Problems are: you see all the other images if you jump multiple steps at once;

it requires that you use a fixed width;

it's a pain if you want to change the background for just one slide;

1. Preload the background for the next slide on a div which is a sibling of container but has a higher z-index. Use jquery to slide this over the existing background, from the appropriate side. The good thing about this method is that you can use css to make the background image always take up the full-width of the screen, or use a bigger imager and have it centred. See here: http://cksk.com for an example.

Long story short, you won't get this working with an off-the-shelf solution, you'll need to get your hands dirty.

Also, you'll need to spend a hell of a lot of time on optimisation.

Try this css...

#slider {
    width: 472px; /* divided the width of the background image by 4 (# of panels) */
    height: 570px;
    list-style: none;
    /* start background after the initial cloned panel: 472px to match panel width */
    background: transparent url(../images/background.png) 472px 0 repeat-x;
}

/* This makes sure the last cloned panel background matches the first panel */
ul#slider li.clone {
    background: transparent url(../images/background.png) 0 0 repeat-x !important;
}

/* Make the background visible */
div.anythingSlider .anythingWindow {
    overflow: visible !important;
}

The only problem is that the width of the UL is limited, so when you get to the last panel, the background ends, but reappears once you hit the right arrow.