Creating a full-width background color using CSS - HTML CSS CSS Property

HTML CSS examples for CSS Property:background-color

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

Description

Creating a full-width background color using 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">

@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,100&subset=cyrillic,cyrillic-ext,latin-ext,latin);
body<!--from  ww w .ja v  a2  s  .  c o  m-->
{
   font-family: 'Roboto', sans-serif;
}
span.title
{
   font-weight: 100;
   font-size: 66px;
   width: 100%;
   float: left;
}
body { overflow-x:hidden;  !important}
html
{
   width: 100%;
}
div.row
{
   width: 100%;
}
div.span10
{
   width: 100%;
}
div.span9
{
   width: 90%;
}
div.span8
{
   width: 80%;
}
div.span7
{
   width: 70%;
}
div.span6
{
   width: 60%;
}
div.span5
{
   width: 50%;
}
div.span4{
   width: 40%;
}
div.span3
{
   width: 30%;
}
div.span2
{
   width: 20%;
}
div.span1
{
   width: 10%;
}
/*Row Styles*/
div.title
{
   background-color: #F7D023;
   height: 100px;
   color: white;
   position: absolute:
   left: 0;
   right: 0;
   overflow-x:hidden;  !important
}
html,body{
   padding:0;
   margin:0;
}


      </style> 
 </head> 
 <body> 
  <div class="row title"> 
   <span class="title">WebSpace</span> 
  </div>  
 </body>
</html>

Related Tutorials