How to make background center in content in accordion menu

Question

So I'm a self learner on this accordion menu from this site. My objective is to make the background image to be at the center of content area of slide-1. However, I'm unable to achieve this as the image does not centered on the content div. My current background image size 640x480 pixel. Appreciate any help on what went wrong

here is my html

<div  id='h-accordion'>
                    <ul id='slides'>
                        <li class='slide open active' id='slide-1'>                         
                            <div class='text-box'>                              
                                <div class='slidebutton'>
                                    <h3>Sign In</h3>
                                </div>

                                <div class='content'>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                </div>                              
                            </div>
                        </li>

                        <li class='slide open' id='slide-2'>                            
                            <div class='text-box'>                              
                                <div class='slidebutton'>
                                    <h3>Reset Password</h3>
                                </div>

                                <div class='content'>
                                    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                                </div>                              
                            </div>
                        </li>

                        <li class='slide open' id='slide-3'>                            
                            <div class='text-box'>                              
                                <div class='slidebutton'>
                                    <h3>Register</h3>
                                </div>

                                <div class='content'>
                                    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
                                </div>                              
                            </div>
                        </li>
                        <li class='slide open' id='slide-4'>                            
                            <div class='text-box'>                              
                                <div class='slidebutton'>
                                    <h3>Useful Links</h3>
                                </div>

                                <div class='content'>
                                    <div id='extlist'>
                                        <ol class='liststyle'>
                                            <li><a href='#' target='_blank'>Sub-Menu-1</a></li>
                                            <li><a href='#' target='_blank'>Sub-Menu-2</a></li>
                                            <li><a href='#' target='_blank'>Sub-Menu-3</a></li>
                                            <li><a href='#' target='_blank'>Sub-Menu-3</a></li>
                                            <li><a href='#' target='_blank'>Sub-Menu-4</a></li>                                         
                                        </ol>
                                    </div>
                                </div>                              
                            </div>
                        </li>
                    </ul>
                </div>

my css

#wrapper {
width: 100%;
margin: 0 auto;
}

#content {
width: 90%;
margin: 0 auto;
}

#extlist {
margin-left: 10px;
margin-top: 10px;
}

ul li {
list-style: none;
}

 #h-accordion {
position: relative;
width: 900px;
height: 450px;
margin: 30px auto;
}

ul#slides {
list-style: none;
width: 900px; 
overflow: hidden; 
position: absolute;
height: 450px;
}


.text-box {
width:900px;
height:450px;
}

.slidebutton {
width:50px;
float:left;
height:450px;
background: #3399FF;
} 

.content {
width:660px;
float:left;
padding-left:10px;
height:450px;
}

#slide-1 {
position: absolute;
top: 0;
left: 165px;
z-index: 4;
background: #FFFFFF url('images/login.jpg') no-repeat center center;
}

#slide-2 { position: absolute;
top: 0;
left: 110px;
z-index: 3;
background-color: #FFFFFF;
}

#slide-3 { position: absolute;
top: 0;
left: 55px;
z-index: 2;
background-color: #FFFFFF;
}

#slide-4 { position: absolute;
top: 0;
left: 0px;
z-index: 1;
margin-top:auto;
margin-bottom:auto;
background-color: #FFFFFF;
}

.slidebutton h3 {
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
position:relative;
top: 50px;
left: -15px;
display:inline-block;
color:#fff;
text-transform:capitalize;
width: 150px;
height: 100px;
}

and the associated jQuery

$(document).ready(function() {

            // Main Accordion 

            $('.slide')
                .bind('open', function(){
                    if(! $(this).hasClass('open')){
                        $(this).next().trigger('open');
                        $(this).addClass('open');
                        $(this).animate({left: "-=680px"});
                    }
                    else{
                        $(this).prev().trigger('close');
                    }
                    $(this).siblings().removeClass('active');
                    $(this).addClass('active');
                })
                .bind('close', function(){
                    if($(this).hasClass('open')){
                        $(this).removeClass('open');
                        $(this).animate({left: "+=680px"});
                        $(this).prev().trigger('close');
                    }
                });

            $('.slidebutton')
                .click(function(){
                    $(this).parent().trigger('open');
                    $('#content-' + $(this).parent().attr('id')).trigger('show');
                });

        });

edit to include link to JSFiddle

Answer 1

Try this... Add an image tag for each slide like so:

 .cover {
       width:100%;
       height: 100%;
       position: fixed; 
       left: 0; 
       top: 0; 
       right: 0; 
       bottom: 0; 
       z-index:1;
    }

<img src="bg-image.jpg" class="cover">

This solution is great for all modern browsers (e.g. IE7+, Chrome, FF, Safari)