Search code examples
imagetwitter-bootstrapbackgroundcontainersfullscreen

Bootstrap places white body on top of background Image

I have created a full screen background image website using css, however when I try and also link bootstrap it creates a white, full screen container covering the entire page. When I go into the bootstrap CSS and comment the whole thing out the white container remains. The only way to get rid of it is to remove the bootstrap link from my head tag. Below is the HTML then the CSS.

<html lang="en">
<head>
    <link href="css/bootstrap.css" rel="stylesheet"/>
    <link href="local.css" rel="stylesheet"/>
</head>


html{
    background:url('img/50925.jpg') no-repeat center center;
    min-height:100%;
    background-size:cover;
}

body{
    min-height:100%;
}

Anyone got any ideas?

Solution

  • Set the background of the body to be fully transparent with

    background-color:rgba(0, 0, 0, 0.0);

    jsfiddle: https://jsfiddle.net/o9mgygzu/