Bootstrap 4 Full page image background?

Question

I'm trying to create a full page image background with Bootstrap 4, but it's not working and I don't know how to solve this. I have googled, but I can't find any solution that works.

I'm using this CSS for the div tag:

background-image: url("img.jpg");
height: 100%; 
background-position: center;
background-repeat: no-repeat;
background-size: cover;

I'm using a background image because I want to add some headline and text on the background image. I have tried to place this div inside .container and .container-fluid and also without, but nothing works! Is there something in Bootstrap that prevent the creation of a full image background?

Really appreciate some help since my boss asking me all the time when the site will be ready!

Answer 1

I'm not sure if this is what you are after.

See this live bootstrap demo: https://www.codeply.com/go/dYqBNLTEwu

It's pretty simple. This is the main css below that achieves this.

HTML {
    height: 100%;
}

BODY {
    min-height: 100%;
    background-image: url("https://i.imgur.com/fu3Rgc7.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}