Split Background Color HTML

Question

So, I understand that this is the code for splitting the background in two colors:

#top,
#bottom {
    position: fixed;
    left: 0;
    right: 0;
    height: 50%;
}

#top {
    top: 0;
    background-color: orange;
}

#bottom {
    bottom: 0;
    background-color: green;
}

The source of this can be visualized here: http://dabblet.com/gist/2870276.

On my website, rather than 50% and 50%, I have 30% and 70%. How do I make it so that when the browser is adjusted to shrink horizontally, the top 30% doesn't stay at 30% but at the height of the original?

Answer 1

I suggest using a gradient instead of document elements for background effects like this.

Try this:

body {
    background-image: linear-gradient(to bottom, orange, orange 50%, green 50%, green);
    background-size: cover;
    background-repeat: no-repeat;
}

Note that you'll need to make the body element fill the page:

html, body {
    margin: 0;
    height: 100%;
}

Here is my example: http://dabblet.com/gist/4ba4bde188af953dcdcc

That said, I don't understand what you mean by "shrinking horizontally" or "height of the original" - I hope I've answered what you're looking for.

Update:

According to Albert in the comments the OP wants the 30% to be relative to the height of the viewport when the page is loaded. This is doable, but must be done through JavaScript. I'll give a pure JS implementation without using jQuery.

window.addEventListener("DOMContentLoaded", setBodyGradientOnLoad);

function setBodyGradientOnLoad() {
    var heightPx = window.innerHeight;
    var gradientStop = Math.floor( heightPx * 0.3 );
    var body = document.getElementsByTagName("body")[0];
    body.style.backgroundImage = "linear-gradient(to bottom, orange, orange " + gradientStop + "px, green " + gradientStop + "px, green)";
}

Note that you still need the rest of the CSS to apply the background-size and background-repeat options, as well as to provide a fallback for browsers with JavasScript disabled.

Note that my use of "DOMContentLoaded" and the un-prefixed linear-gradient means this will only work in modern browsers (IE 9+, Safari 3.1+ - 2010 or later, basically)

Answer 2

I would suggest to not use two elements to do so. Only use one and set a "split background-color" like so. By the way, doing this purely with CSS will make it responsive to all screen resizing.

I solved this purely with CSS, and with NO EXTRA DOM ELEMENTS! This means that the two colors are purely that, just background colors of ONE ELEMENT, not the background color of two.

I used a gradient and, becuase I set the color stops so closely together, it looks as if the colors are distinct and that they do not blend.

Here is the gradient in native syntax:

background: repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);

Color #74ABDD starts at 0% and is still #74ABDD at 49.9%.

Then, I force the gradient to shift to my next color within 0.2% of the elements height, creating what appears to be a very solid line between the two colors.

Here is the outcome:

And here's my JSFiddle!

Have fun!