Hi there nayen,
I would suggest that you don’t use background images behind
scrolling text, as they can possibly cause readability problems. 
This problem will certainly be magnified with the implementation
of a rather distracting fading effect. 
If your heart is set on having the fading effect though, then a
solid colour should really be your choice for the background. 
Using …[quote=“PaulOB, post:2, topic:220606”]
live example
[/quote]
…as a basis, the follow code provides a responsive example…
[code]
Untitled Document
html {
box-sizing: border-box;
}
* {
box-sizing: inherit;
}
html,body {
height: 100%;
margin: 0;
padding: 0;
background-color: rgba(240,240,240,1);
font: 1em/1.62em arial,helvetica sans-serif;
}
#header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 4;
min-height: 6em;
text-align: center;
color: rgba(51,51,51,1);
}
h1 {
margin: 0.62em 0;
font-size: 1.2em;
}
h2 {
font-size: 1.2em;
text-align: center;
}
/* could use body:after but IE breaks with it*/
#overlay {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 3;
pointer-events: none;
background: linear-gradient(to bottom,rgba(240,240,240,1),
rgba(240,240,240,1) 16%,
rgba(240,240,240,0) 48%);
}
#left,#right {
position: fixed;
left: -1.5em;
top: 6.5em;
bottom: -1.5em;
width: 65%;
overflow: hidden;
}
#right {
left: auto;
right: 0;
width: 35%;
}
#left-inner,#right-inner {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: -1.5em;
padding: 1.5em 2em;
font-size: 1.25em;
color: rgba(51,51,51,1);
overflow: scroll;
}
#right-inner {
padding-left:0;
}
#left-inner p:last-of-type,
#right-inner p:last-of-type {
padding-bottom: 2em;
}
@media screen and (max-width:40em){
#content {
position: fixed;
left: 0;
top: 6.5em;
bottom: -1.5em;
width: 100%;
overflow: hidden;
}
#content-inner {
position: absolute;
top: 0;
left: -1.5em;
bottom: 0;
right: -1.5em;
padding:1.5em 0;
overflow: scroll;
}
#left,#right,#left-inner,#right-inner {
position:static;
width: 100%;
padding-bottom: 0;
overflow: hidden;
}
#right-inner {
padding-left: 2em;
}
#left-inner p:last-of-type {
padding: 0;
margin-bottom: 0;
}
h2 {
margin:0;
}
}
Wheel or up and down keys scrolls content
Left content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero
bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh,
posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat.
Curabitur et volutpat nibh. Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta,
sapien nec molestie molestie, odio magna vestibulum lorem, vitae feugiat est leo sit amet
nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac magna sed, pretium commodo
odio. Sed porttitor augue velit, quis placerat diam sodales ac. Curabitur vitae porta ex.
Praesent rutrum ex fringilla tellus tincidunt interdum. Proin molestie lectus consectetur
purus aliquam porttitor. Fusce ac nisi ac magna scelerisque finibus a vitae sem.
Donec vehicula diam non leo efficitur, id euismod odio tincidunt. Vivamus auctor viverra
purus vitae lobortis. Sed et libero non diam tempor sagittis. Quisque vel egestas ipsum.
Integer sed elit eu orci blandit commodo in in erat. Donec blandit, mi at gravida varius,
nulla tellus vulputate ex, vitae euismod erat lectus rutrum diam. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur tristique
varius ullamcorper.
Nam venenatis diam ante, et cursus elit porttitor at. Morbi mattis leo at ex vehicula, non
vestibulum ligula aliquam. Maecenas non nibh sollicitudin, porttitor odio in, elementum arcu.
Donec pulvinar orci enim. In pulvinar congue ante, ac rutrum odio bibendum volutpat.
Phasellus ac sem consequat lorem congue malesuada vitae vitae diam. Donec eu imperdiet
augue. Curabitur ullamcorper sit amet libero in ullamcorper. Donec sed laoreet quam.
Phasellus malesuada libero felis, non elementum ex tincidunt eget. Quisque cursus arcu vel
diam consectetur, ac imperdiet est cursus. Fusce id nunc nibh.
Right content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero
bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh,
posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat.
Curabitur et volutpat nibh. Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta,
sapien nec molestie molestie, odio magna vestibulum lorem, vitae feugiat est leo sit amet
nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac magna sed, pretium commodo
odio. Sed porttitor augue velit, quis placerat diam sodales ac. Curabitur vitae porta ex.
Praesent rutrum ex fringilla tellus tincidunt interdum. Proin molestie lectus consectetur
purus aliquam porttitor. Fusce ac nisi ac magna scelerisque finibus a vitae sem.
Donec vehicula diam non leo efficitur, id euismod odio tincidunt. Vivamus auctor viverra
purus vitae lobortis. Sed et libero non diam tempor sagittis. Quisque vel egestas ipsum.
Integer sed elit eu orci blandit commodo in in erat. Donec blandit, mi at gravida varius,
nulla tellus vulputate ex, vitae euismod erat lectus rutrum diam. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur tristique
varius ullamcorper.
[/code]
coothead
