Fix background to labels - HTML CSS CSS Property

HTML CSS examples for CSS Property:background

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

Description

Fix background to labels

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">

.menusx {<!--   w  w  w  . j  a v  a 2s.co m-->
   float:left;
   width:20%;
   text-align:center;
   margin-bottom:7px;
}
.menu {
   float:left;
   width:20%;
   text-align:center;
   margin-left: 5px;
   margin-bottom:7px;
}
.menuitem {
   background-color:#e5e5e5;
   padding:8px;
   margin-top:7px;
}
.menudiv {
   background-image: url("https://www.java2s.com/style/demo/Firefox.png");
   width: 100%;
   background-repeat: no-repeat;
   background-size: contain;
}
.right {
   background-color:#e5e5e5;
   float:left;
   width:20%;
   padding:14px;
   margin-top:7px;
   text-align:center;
   margin-left: 5px;
}
@media only screen and (max-width:620px) {
   .menu, .main, .right {
      width:100%;
   }
}


      </style> 
 </head> 
 <body style="font-family:Verdana;color:#aaaaaa;"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <div style="overflow:auto"> 
   <div class="menudiv" style="overflow:auto"> 
    <div class="menusx"> 
     <div class="menuitem">
       Link 1 sx 
     </div> 
     <div class="menuitem">
       Link 2 sx 
     </div> 
     <div class="menuitem">
       Link 3 sx 
     </div> 
     <div class="menuitem">
       Link 4 sx 
     </div> 
    </div> 
    <div class="menu"> 
     <div class="menuitem">
       Link 1 
     </div> 
     <div class="menuitem">
       Link 2 
     </div> 
     <div class="menuitem">
       Link 3 
     </div> 
     <div class="menuitem">
       Link 4 
     </div> 
    </div> 
    <div class="right"> 
     <h3>Table</h3> 
     <p>Dynamic content of the table</p> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials