Problem changing background color

Asked

Viewed 114 times

0

Even adding body{background-color:#CCCACC;} in the CSS the background 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>

html css

  • Tries background-color:#CCCACC !important;

  • @Sam now was man, ty!

1 answer

3


The CSS of Bootstrap background-color for #fff (white).

To overlap, add !important in his:

body{background-color:#CCCACC !important;}


@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 !important;}
#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>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.