How can I create Input field over full screen, image slideshow


Tags: html5,image,css3,html,background

Problem :

I made the background of my page into a slideshow that cycles a series of images but I want to be able to display fields on top. How do I stop the fields from going behind the images?

<!doctype>
<html>
<header>
<meta charset="utf-8">
<title>Playcation 2013</title>
<script src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/modernizer.js"></script>
<link rel="stylesheet" type="text/css" href="styles/index.css">
</header>
 <body id="page">
        <input type="submit" value="Send">
        <ul class="cb-slideshow">
           <li><span>Image 01</span><div></div></li>
            <li><span>Image 02</span><div></div></li>
            <li><span>Image 03</span><div></div></li>
            <li><span>Image 04</span><div></h3></div></li>
        </ul>
   </body>

CSS

.cb-slideshow,
.cb-slideshow:after { 
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0; 
}
.cb-slideshow:after { 
    content: '';
    background: transparent url(../images/pattern.png) repeat top left; 
}
.cb-slideshow li span { 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 36s linear infinite 0s;
    -moz-animation: imageAnimation 36s linear infinite 0s;
    -o-animation: imageAnimation 36s linear infinite 0s;
    -ms-animation: imageAnimation 36s linear infinite 0s;
    animation: imageAnimation 36s linear infinite 0s; 
}
.cb-slideshow li div { 
    z-index: 1000;
    position: absolute;
    bottom: 30px;
    left: 0px;
    width: 100%;
    text-align: center;
}


Solution :

changing z-index to a negative value did it :)


    CSS Howto..

    How to make my text appearing while scrolling website

    How to center navigation that has icons so text is aligned to icons?

    Bootstrap 3 / CSS: How to properly vertically align in panel heading

    CSS: How to shrink first div in container instead of going outside of container (second container should be shown just after first) [closed]

    How to code CSS for all browsers in jQuery.css() method?

    How to make CSS Column Design quickly?

    How to Control Width of Title (H2) with CSS?

    How to use images in css with Webpack

    How to wrap long lines without spaces in HTML?

    How to link css files to work correctly with wamp server?

    how to hide submenus in jquery menu

    User agent, how to have diferent css files for diferent devices automaticly

    Using `.toggle()` rather than applying a class to show content

    How do I get my List Items to move up a Little in CSS

    How to make

    How to vertically center text overlapping an image?

    How to make a div one on the top and one on the bottom touching

    How can I adjust image width and height to 100 x 100 keeping ratio?

    css menu active sub links to show on parent link

    How to call the event of one element in another element in JQuery

    Updating CSS via plain JavaScript… how do I update if the property uses vendor prefixes?

    Jquery Mobile CSS Android Styling Boarders Not Showing On Button

    How can I use bootstrap in css file?

    How do I remove the white line under the nav bar

    how to add css code on jquery?

    How can i give transparency effect in CSS?

    how to make “before” li is fixed at the bottom of li?

    How can I force browsers to print background images in CSS?

    CSS How to align two DIVs on the same line without using floats

    how to change padding of last element of li in css