Change the background color on specific divs - HTML CSS CSS Property

HTML CSS examples for CSS Property:background-color

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. background-color

Description

Change the background color on specific divs

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

body {<!--from  ww  w .ja v a2  s .co m-->
   background: url(https://www.java2s.com/style/demo/Firefox.png), linear-gradient(180deg, #FFFFFF 80%, #B4B4B4 20%);
   background-color: white;
   background-size: 70%;
   background-attachment: fixed;
   background-repeat: no-repeat;
}
#A {
   overflow: hidden;
   border: none;
}
object {
   width: 1500px;
   height: 800px;
   display: inline-block;
}
#B {
   background-color: #bb7676;
   clear: both;
   display: flex;
   overflow: hidden;
   margin-left: -10px;
   border: none;
   width: 600px;
   border: thick;
   height: 300px;
   display: inline-block;
   margin-right: 0px;
   float: left;
}
#C {
   background-color: #7776cc;
   clear: both;
   display: flex;
   flex: 0 1 auto;
   overflow: hidden;
   border: thick;
   width: 1250px;
   height: 300px;
   display: inline-block;
   margin-right: -10px;
}
#D {
   background-color: yellow;
   clear: both;
   overflow: hidden;
   border: none;
   width: 1900px;
   height: 1000px;
}
.webmaster {
   background-color: yellow;
   clear: both;
   margin-left: -10px;
   background-color: white;
   overflow: hidden;
   height: 80px;
   width: 1920px;
   border: none;
   text-align: justify;
   padding: 20px 640px;
   font-size: 20px;
   margin-top: -5px;
}
a:link {
   text-decoration: none;
   color: #000000;
}
a:visited {
   text-decoration: none;
   color: blue;
}
a:hover {
   text-decoration: none;
   color: #B2B2B2;
}
a:active {
   color: #000000;
   text-decoration: underline;
}


      </style> 
 </head> 
 <body> 
  <div id="A"> 
   <object type="text/html" data="A.html"> </object> 
  </div> 
  <div id="D"> 
  </div> 
  <div id="B"> 
   <object type="text/html" data="B.html"> </object> 
  </div> 
  <div id="C"> 
   <object type="text/html" data="C.html"> </object> 
  </div> 
  <div class="webmaster">
    2017 | 
   <a href="mailto:webmaster@site.com">webmaster@your site</a> | 
  </div>  
 </body>
</html>

Related Tutorials