CODEWITHSUNDEEP
css
lfkwtz
lfkwtz

Reputation: 1017

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

I see a lot of code dealing with percentages, but what if I just wanted a 100px bar in the top? I am only able to edit the CSS of this page, so can I do it without any use of HTML?

Upvotes: 4

Views: 839

Answers (7)

DaniP
DaniP

Reputation: 38252

Use :before pseudo-element:

body:before {
    content: " ";
    display:block;
    width:100%;
    height:100px;
    background:blue;
}

With this you can change some properties and have this results:

Content Above the Bar

body {
  color:white;
  margin:0;
}
body:before {
    content: " ";
    display:block;
    position:absolute;
    top:0;
    width:100%;
    height:100px;
    background:blue;
    z-index:-1;
}
<h1>The content will be above the bar</h1>

Content Under the Bar

body {
  margin:0;
}
body:before {
    content: " ";
    display:block;
    width:100%;
    height:100px;
    background:blue;
}
<h1>The content will be under the bar</h1>

Upvotes: 4

Sampson
Sampson

Reputation: 268364

You can use a sized, laterally-repeating, linear-gradient:

html {
    background: white linear-gradient( 0, blue, blue ) repeat-x;
    background-size: 100px 100px;
}

Fiddle: http://jsfiddle.net/r5a2uabw/4/

Upvotes: 3

Talmid
Talmid

Reputation: 1401

You can use the ::before pseudo class on the <body> element, or another top-level container.

body::before {
    content: '';
    display: block;
    height: 100px;
    background-color: blue;
}

jsFiddle demo

Upvotes: 0

Axel
Axel

Reputation: 10772

Another solution, simply use a border-top on the body.

body {
    border-top: 100px solid blue;
    margin: 0;
}

http://jsfiddle.net/n8mq9prr/

Upvotes: 2

HeyImArt
HeyImArt

Reputation: 538

Add a border-top to your body. Than possibly pad your content accordingly.

Something possibly like this.

body {
     border-top: 100px solid blue;
}

If you had any examples we could help in more detail.

Upvotes: 1

JVMATL
JVMATL

Reputation: 2122

I am not in front of a computer where I can try this right now, but it seems like you should be able to set the background color to white and then load a 100 pixel tall background image of your desired shade of blue and set the image to repeat in the x-direction (horizontally) but not the y direction

Upvotes: 1

Json Segel
Json Segel

Reputation: 28

Put this HTML at the very top of your page. First piece of code blow <body>

<div id="topBar"></div>

Here's the CSS:

#topBar {
    height:100px;
    background-color:#FFF;
    }

Upvotes: 0

Related Questions