Split HTML background color
So my understanding is that this is the code to split 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 seen here: http://dabblet.com/gist/2870276 .
On my site, not 50% and 50%, I have 30% and 70%. How do you make sure that when the browser is set to compress horizontally, the top 30% doesn't stay at 30%, but at the height of the original?
source to share
I suggest using a gradient instead of document elements for background effects like this.
Try the following:
body {
background-image: linear-gradient(to bottom, orange, orange 50%, green 50%, green);
background-size: cover;
background-repeat: no-repeat;
}
Note that you need to make the element body
fill the page:
html, body {
margin: 0;
height: 100%;
}
Here's my example: http://dabblet.com/gist/4ba4bde188af953dcdcc
However, I don't understand what you mean by "horizontal compression" or "original height". I hope I answered what you are looking for.
Update:
According to Albert in the comments, the OP wants 30% to be relative to the viewport height when the page is loaded. It is doable, but must be done via JavaScript. I'll give a clean 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 options background-repeat
, and to provide a fallback for browsers with Javascript disabled.
Note that my use of " DOMContentLoaded
" and un-prefixed linear-gradient
means this will only work in modern browsers (IE 9+, Safari 3.1+ - 2010 or newer, mostly)
source to share
Just use Javascript! Convert "%" to "#pixels" directly when the page is loaded and then never convert it again, so even when the user adjusts the size of their page, the height is constant, 30% of what the page was originally at, not new page height.
(* Note: this won't work on Dabblet.com as it doesn't support Javascript .. here is the JSFiddle version of it. 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>
source to share
I would suggest not using two elements for this. Use only one and set "split background-color". By the way, to do this exclusively with CSS, it will react to all changes of the screen size.
I solved it purely with CSS and with NO EXTREME ELEMENTS! This means that these two colors are purely the same, only the background color of ONE ELEMENT, not the background color of the two.
I used a gradient, and since I have set the color to stop so close together it seems that the colors are different 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%);
The color #74ABDD
starts with 0%
and is still #74ABDD
in 49.9%
.
I then force the gradient to shift to the next color within the 0.2%
height of the elements, creating what appears to be a very solid line between the two colors.
Here's the result:
Good luck!
source to share
You can always use pixels instead of percentages if you want to keep a specific background color. If its a nav section you are trying to keep in place, you can use Bootstrap as well. Below is an example of a fixed nav block: http://startbootstrap.com/templates/freelancer/
source to share
I'll go ahead and answer the question with minimal impact on the OP's code:
#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;
}
source to share