transparent background-color not working

Question

i have this issue with bootstrap 4: i'm working on a web page and i've put a fixed background with css. I want to put multiple <div> one under another, with some transparent space between them, in order to see pieces of the background image in these transparent spaces. The problem is that bootstrap (i guess) makes every kind of background text to be white-coloured so the transparent thing doesn't work. I created a "spazioVuoto" class in css that should make the background transparent, but it doesn't. Can anyone help me?

PS. if you want to see an example of what i'm talking about, look at http://it.diesel.com/it/

here is a codepen example https://codepen.io/anon/pen/ooJqVK

this is my code

  html { 
    background: url(img/background.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.spazioVuoto {
    background-color: transparent;
    padding: 5em;
}

Answer 1

The problem here is that your body have a backgournd-color:#fff, so even if spazioVuoto have background transparent the color will be still white because of that. Try to change it (spazioVuoto background-color) to red and you will see that it will work. So you have to put the body background to transparent and then work on other containers to set their background-color.

html { 
  background: url("w3schools.com/w3css/img_fjords.jpg") 
  no-repeat center center fixed; 
  -webkit-background-size: cover; 
  -moz-background-size: cover; 
  -o-background-size: cover;
  background-size: cover;
} 
body {  
  background-color:transparent !important;
} 
.spazioVuoto { 
  background-color: transparent;
  padding: 5em; 
}
.container { 
  max-width: 100% !important;
  background-color: #fff;
  width: 100% !important;
  padding: 1% 20% !important;
}