WordPress.org

Forums

Adding a Background Image to a Div of Index page (1 post)

  1. boyfunky
    Member
    Posted 7 months ago #

    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

Reply

You must log in to post.

About this Topic