CODEWITHSUNDEEP
htmlcssbackground
CloudTwoNJ
CloudTwoNJ

Reputation: 85

How do I set colors for specific sections of my background?

I'm currently attempting to set my background color for a specific section of my page background. The idea is to have about 1/5 or 1/4 of the top section of the page be one color, while the whole remaining bottom is a separate color. I've considered using gradients to do it, but I don't know how to set the specific stopping section via CSS3.

Any ideas of how I could get this done using CSS3?

Upvotes: 0

Views: 294

Answers (3)

Turnip
Turnip

Reputation: 36742

Use a gradient generator

html, body {
  min-height: 100%;
}

body {
  background: #fb83fa;
  background: -moz-linear-gradient(top, #fb83fa 25%, #7ceacd 25%, #7ceacd 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(25%,#fb83fa), color-stop(25%,#7ceacd), color-stop(100%,#7ceacd));
  background: -webkit-linear-gradient(top, #fb83fa 25%,#7ceacd 25%,#7ceacd 100%);
  background: -o-linear-gradient(top, #fb83fa 25%,#7ceacd 25%,#7ceacd 100%);
  background: -ms-linear-gradient(top, #fb83fa 25%,#7ceacd 25%,#7ceacd 100%);
  background: linear-gradient(to bottom, #fb83fa 25%,#7ceacd 25%,#7ceacd 100%);
}

Or you could ditch the gradients and use a pseudo element...

html, body {
    min-height: 100%;
}

body {
    background: #7CEACD;
}

body:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 25%;
    background: #fb83fa;
}

Upvotes: 1

Shaggy
Shaggy

Reputation: 6796

Without needing to figure out the stopping points, you could use a gradient with just 2 identical colours and use background-size to set its height.

html,body{
    height:100%;
}
body{
    background:linear-gradient(0deg,#f00,#f00) no-repeat;
    background-size:100% 25%;
}

Upvotes: 0

UsainBloot
UsainBloot

Reputation: 816

You could use separate divs to represent the different sections and then use height: 20vh to represent 20% of the current view height.

.top {
    background-color: blue;
    height: 20vh;
}

.bottom {
    background-color: red;
    height: 80vh;
}

http://jsfiddle.net/goerfjyf/1/

I have also included a container div to hold the rest of your content basically acting in the same way as the body usually does.

Upvotes: 0

Related Questions