My page has a text form in the middle. The aim is to use css opacity transitions to switch background images by fading. (I'll be switching background images quite often)

Currently got it working nicely by using two layers of background images. To display a new image at the bottom layer, we fade out the top layer (opacity 1 to 0). To display a new image at the top layer, we fade in the top layer (opacity 0 to 1).

The problem is that my text form fades along with the top layer - which I want it to stay visible. How do I make it unaffected by the fading?

Attempts to solve this: 

1. Setting z-index of either `#searchForm input` or `.formDiv` to 999999, thinking that this will put the form right at the top of the hierachy so it would be unaffected by transitions below. However, didn't work.
2. Setting position of `#searchForm input` or `.formDiv` to absolute. From <http://www.w3schools.com/css/css_positioning.asp>, 
"Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element does not exist."
3. This stackoverflow post [CSS3 Alternating table rows opacity affects text as well as background](https://stackoverflow.com/questions/8229113/css3-alternating-table-rows-opacity-affects-text-as-well-as-background?rq=1) says that child elements are affected by opacity too. I tried placing the div containing the background images *inside* the `formDiv` class so that it wouldn't be a child. But this will get the form covered by the top image, even without opacity on.

![enter image description here](https://i.stack.imgur.com/pUQdz.png)

```
function changeBackground(newUrl) {
    //check which layer is currently activated
    if ($('#background-image-top').hasClass('transparent')) {
        //place new image over top layer
        $('#background-image-top').css('background-image', 'url(' + newUrl + ')');
        //fade in new image
        $('#background-image-top').toggleClass('transparent');
    } else {
        //place new image over bottom layer
        $('#background-image-bot').css('background-image', 'url(' + newUrl + ')');
        //fade out old image
        $('#background-image-top').toggleClass('transparent');
    }
}

    #background-image-top {
    background-image: url("../images/default.jpg");
    background-repeat: no-repeat;
    background-position: center center;

    background-size: cover;
    -webkit-background-size:cover;
    -moz-background-size:cover;

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out; }

    #background-image-bot {
    background-repeat: no-repeat;
    background-position: center center;

    background-size: cover;
    -webkit-background-size:cover;
    -moz-background-size:cover;

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;}

    .transparent {
    opacity: 0.25;}

    .formDiv {
    background-color: red;
    max-width: 500px;
    height: 50px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 35%;}

    #searchForm input {
    width: 300px;
    height: 30px;
    font-size: 18px;}

```