Adding a Background Image to a Div of Index page

A newbie of WordPress here.

This is my index.php page

<?php
/**
 * The main template file
**/
get_header();
$generator_options = get_option( 'faster_theme_options' );
?>
<div class=" container-generator1">

 <div class="block2">
<div class="block">
            <span class="play-button">
            <span></span>
        </span>
        </div>
 </div>
<div class="block1">
           <?php get_footer(); ?>
        </div>

 </div>

this is my style.css page

body {
	background-color: transparent;
	font-family: 'Ubuntu', sans-serif;
	background-color: #FFF;
}

.play-button {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 60px;
    right: 60px;
    border: 4px solid #222;
    border-radius: 108px;
}
.play-button span {
    position: absolute;
    top: 30px;
    left: 60px;
    width: 0;
    height: 0;
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;
    border-left: 100px solid #222;
}

.block2 {
width: 960px;
}
.block1 {
position: absolute;
margin-top: 400px;

}

.block {
position: absolute;
width: 200px;
height: 200px;
margin-left: 450px;
background-image: url("images/bg1.jpg");
}

.container-generator {
	width: 960px;

}

.container-generator1 {

	margin-left: 90px;
	margin-right: 50px;
}

I want to add an image slider that shows behind the <div class=block> as a background. And make the play button clickable and when it is clicked users will be directed to another page.

How can I do this?

Thanks
Kingsley