CODEWITHSUNDEEP
htmlcss
Calvin
Calvin

Reputation: 41

Split Background Color HTML

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?

Upvotes: 4

Views: 26325

Answers (5)

WebWanderer
WebWanderer

Reputation: 10867

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:

Split Background Color

And here's my JSFiddle!

Have fun!

Upvotes: 4

psahakyan
psahakyan

Reputation: 1

I will go on and answer the question, affecting the OP code minimally:

#top{       
    position: fixed;
    left: 0;
    right: 0;
    height: 30%;
}
#bottom {
    position: fixed;
    left: 0;
    right: 0;
    height: 70%;
}

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

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

Upvotes: 0

Albert Renshaw
Albert Renshaw

Reputation: 17882

Just use Javascript! Convert the "%" to "#pixels" right when the page loads, and then never convert it again, so that even when the user adjusts the size of their page, the height is constant, 30% of what the original height of the page was, not the new height of the page.

(*Note: This won't work on Dabblet.com since it doesn't support Javascript.. here is a JSFiddle version of it operational. http://jsfiddle.net/x35o09m1/ )

<html>
<head>

<div id="bottom" style="position: fixed; left: 0; right: 0; bottom: 0; height:100%; background-color: green;">bottom - 70%</div>
<div id="top" style="position: fixed; left: 0; right: 0; top: 0; background-color: orange;">top - 30%</div>

<script type="text/javascript">

    var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    x = w.innerWidth || e.clientWidth || g.clientWidth,
    y = w.innerHeight|| e.clientHeight|| g.clientHeight;

    document.getElementById("top").style.height = (y*0.3)+"px";

</script>


</head>
</html>

Upvotes: 1

Dai
Dai

Reputation: 155045

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)

Upvotes: 13

Swati Kumar
Swati Kumar

Reputation: 1

You can always use pixels instead of percentages if you want to keep a particular background color fixed. If its a navigation section you're trying to keep fixed in place, though, you can also use Bootstrap. Here is an example of a fixed nav block: http://startbootstrap.com/templates/freelancer/

Upvotes: 0

Related Questions