Even adding body{background-color:#CCCACC;} to CSS the background is still white.
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300);
body{background-color:#CCCACC;}
#parallax-image{
background-image: url("xd.jpg");
height: 500px;
background-attachment:fixed;
background-position:center;
background-repeat:no-repeat;
background-size:cover;
}
#parallax-image1{
background-image: url("xd.jpg");
height: 400px;
background-attachment:fixed;
background-position:center;
background-repeat:no-repeat;
background-size:cover;
}
#parallax-image1 h1{
font-family: Cosmic Sans Ms, Cosmic Sans, Cursive;
color:#fff;
font-size:50px;
}
.parl h1{
font-family: Cosmic Sans Ms, Cosmic Sans, Cursive;
color:#fff;
font-size:50px;
}
.parl p{
color:#fff;
}
.artigos{
height:500px;
}
.artigos.h1{
color:#eee;
}
.navbar{
background-color:#268AC9;
height:50px;
}
.navbar ul{
list-style:none;
}
.navbar ul li{
}
.navbar a{
padding:15px;
text-decoration: none;
text-align: center;
color:#fff;
}
.navbar a:hover{
padding:15px;
text-decoration: none;
text-align: center;
color:#eee;
}
.navbar img{
width:300px;
height:150px;
} <!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="style.css" media="screen">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container bg-dark ">
<div class="row">
<nav class="navbar navbar-expand-lg navbar-light w-100">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSt">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSt">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Inicio</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle " href="#" data-toggle="dropdown" id="navDrop">
Logo
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Logar</a>
<a class="dropdown-item" href="#">Cadastrar</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="container pb-5">
<div class="row ">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<h2 class="text-center pt-4 ">Mapa zz</h2>
</div>
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<img src="images/xd.jpg" class="w-100 ">
</div>
</div>
</div>
<div id="parallax-image">
<div class="container">
<div class="row h-100 parl">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<h1 class="text-center pt-4 pb-2">Sobre o Projeto</h1>
</div>
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
</div>
</div>
</div>
</div>
<div class="container">
<div class="row h-100">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<h1 class="text-center pt-4 pb-2">Contato</h1>
<p class="text-center pt-4 ">Entre em contato por nossas midias:</p>
</div>
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 contact">
<div id="social-platforms" class="pt-4">
<a class="btn btn-icon btn-facebook" href="#"><i class="fa fa-facebook"></i><span>Facebook</span></a>
<a class="btn btn-icon btn-pinterest" href="#"><i class="fa fa-youtube"></i><span>Youtube</span></a>
<a class="btn btn-icon btn-twitter" href="#"><i class="fa fa-instagram"></i><span>Instagram</span></a>
</div>
</div>
</div>
</div>
<div id="parallax-image">
<div class="container">
<div class="row h-100 parl">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<h1 class="text-center pt-4 pb-2">+Alguma Seção</h1>
</div>
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>