I want to make the two-tone background. 50% of left side is in the main background color and 50% right side in another color (say pink). I could accomplish that but now facing another problem. When the mouse cursor is on the pink background color, the page becomes unscrollable. How to fix this and make it scrollable?
html code
html,
body {
margin: 0;
overflow: scroll;
height: 100%;
background-color: #f5f5f5;
}
#background {
position: fixed;
top: 0px;
left: 50%;
width: 50%;
height: 100%;
background-color: pink;
z-index: 0;
}
<body><div id="background"></div></body>