CODEWITHSUNDEEP
cssbootstrap-4sasskoala
Kazim Shabbir
Kazim Shabbir

Reputation: 145

Background is not showing in web-page

I am working on Colt Steele's Aurora grove project from his bootstrap bootcamp on Udemy. Instead of using the background image that he has for the project I want to use my own background video. I've inserted it just as he did but for some reason it is not appearing. I can share the github link of the project: https://github.com/Kazim786/sarah-calligraphy

Here is a link of the finished colt steele project someone else deployed: https://aurora-grove.herokuapp.com/index.html (the video needs to be inserted in place of the tipis picture)

Here is the code for where the background video is to be inserted: (#showcase is where I inserted the video link) Koala was also used in this project

body {
    font-family: cursive;;
    background: pink;
}

.navbar {
    font-weight: 100;
    .navbar-brand h3{
        font-weight: 100;
    }
    .nav-item{
        font-size: 1.4rem;
    }
    .nav-link:hover{
        transition: border 0.2s;
        border-bottom: 1px solid white;
    }

}

#showcase {
    background: url("../media/video-1599785729.mp4") bottom center / cover no-repeat;
    min-height: 750px;
    h1{
        font-family: cursive;
        line-height: 1;
    }

    #book{
        font-size: 1.5rem;
        border-radius: 2rem;
    }

    }




@media(max-width: 760px){
    .navbar{
        background: #1f1f1f;
        .nav-link:hover {
            border-bottom: none;
        }
    }
    #showcase {
        min-height: 500px;
        h1{
            font-size: 4rem;
        }
    }
}

Please let me know if HTML is also needed and I will edit it onto here

Upvotes: 0

Views: 53

Answers (1)

Roman Jaquez
Roman Jaquez

Reputation: 2779

Why not use the video tag instead? That will work for sure. Make sure the video is positioned absolute inside your #showcase container like so:

<section id="showcase" class="d-flex align-items-center justify-content-center">
    <video style="
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
" controls=""><source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"></video>
      
... (rest of the code)...
      
</section>

Upvotes: 0

Related Questions