CODEWITHSUNDEEP
css
lfkwtz
lfkwtz

Reputation: 1017

How can I make a CSS background that is all white with a 100px blue bar at the top of the page, with a 50px orange bar?

I asked a similar question a month ago where I just needed the blue bar, and I wound up using this code:

html {  }
body:before {
content: " ";
display:block;
position:absolute;
top:0;
left:0;
right:0;
height:60px;
background:#00205c;
}

it worked great, but now I am trying to add a 50px orange bar below it. i was trying to use gradients, but haven't had any luck. thank you in advance!

Upvotes: 0

Views: 83

Answers (3)

SOuřaan Gřg
SOuřaan Gřg

Reputation: 399

This also works well.

                 /* Css code */

   body
    {
        margin:0px;
    }
   #blue
    {
        width:1366px;
        height:100px;
        background-color:blue; 
    }
   #orange
    {
        width:1366px;
        height:50px;
        background-color:orange;
        margin-top:-100px; 
    }   


   <!-- HTML code -->

     <body>
          <div id='blue'></div>
          <div id='orange'></div>
     </body>

Upvotes: 1

Christopher White
Christopher White

Reputation: 288

html supports the :before pseudo class as well so this works for me...

html:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: blue;
}
body:before {
  content: "";
  display: block;
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  height: 50px;
  background: orange;
}

Upvotes: 2

Weafs.py
Weafs.py

Reputation: 22992

You can add a linear-gradient this way.

html {
}
body:before {
    content:" ";
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:110px;
    background: linear-gradient(#00205c 0px, #00205c 60px, orange 110px);
}

Or if you want solid colors use repeating-linear-gradient:

html {
}
body:before {
    content:" ";
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:110px;
    background: repeating-linear-gradient(#00205c, #00205c 60px, orange 60px, orange 110px);
}

Upvotes: 1

Related Questions