Как сделать фоновый центр в содержании в аккордеонном меню

Question

Так что я самостоятельно учусь на этом аккордеонном меню с этого сайта. Моя цель - сделать фоновое изображение в центре области содержимого слайда-1. Тем не менее, я не могу этого добиться, так как изображение не сосредоточено на содержимом div. Мое текущее фоновое изображение размером 640х480 пикселей. Цени любую помощь на то, что пошло не так

вот мой 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>

мой 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;
}

и связанный 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');
                });

        });

изменить, чтобы включить ссылку на JSFiddle

Answer 1

Попробуйте это... Добавьте тег изображения для каждого слайда следующим образом:

 .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">

Это решение отлично подходит для всех современных браузеров (например, IE7+, Chrome, FF, Safari).