Set .page background-color in CSS - HTML CSS CSS Property

HTML CSS examples for CSS Property:background

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

Description

Set .page background-color in CSS

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   w w w  .  j a v a  2s  .co  m-->
   color:Chartreuse;
   line-height:2.6em;
   font-family:Arial;
   font-size:15px;
   background:yellow url('http://www.java2s.com/style/demo/Google-Chrome.png') repeat-x 0px 0px;
}

.page {
   height:201px;
}

#main_content {
   max-width:981px;
   margin:0px auto 0px auto;
   position:relative;
   background-color:blue;
}
</style> 
 </head> 
 <body> 
  <div id="main_content"> 
   <header> 
    <a href="#" class="logo"></a> 
   </header> 
   <article> 
    <h1>Welcome</h1> 
    <p> Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <a href="#">Duis aute irure</a> dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 
   </article> 
   <div class="promo_container"> 
    <div class="promo"> 
     <div class="content"> 
      <h3>Promo Heading Here</h3> 
      <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> 
      <p> <a href="">Visit our blog</a> </p> 
     </div> 
    </div> 
    <div class="promo"> 
     <div class="content"> 
      <h3>Promo Heading Here</h3> 
      <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit est laborum.</p> 
      <p> <a href="">Read the article</a> </p> 
     </div> 
    </div> 
    <div class="promo"> 
     <div class="content"> 
      <h3>Promo Heading Here</h3> 
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor inci did unt.</p> 
      <p> <a href="">Learn more</a> </p> 
     </div> 
    </div> 
   </div> 
   <nav> 
    <a href="#">About Us</a> 
    <a href="#">Services</a> 
    <a href="#">Portfolio</a> 
    <a href="#">Contact Us</a> 
   </nav> 
   <footer>
     ? Your Organization Name 
   </footer> 
  </div>  
 </body>
</html>

Related Tutorials