CSS background gradient is showing bad for larger screen - html

Question

This is my design layout. Structure like this
<div class="outer">
<div class="container">
<div class="content"></div>
<aside></aside>
</div>
</div>
The css for that layout is
.container{width:1000px; margin:0 auto;}
.content{width:70%; float:left;}
aside{width:30%; float:left;}
Okay, now I need to set up a gradient background for the sidebar. I can use a gradient image repeat-y to make that for the sidebar. But the margin-right space of the container also have the same gradient.
I have used the background gradient for .outer div. It is okay for normal desktop. But when it is visited from a higher resulation it shows something like that.
I know the gradient displacement is happening because of the % used to generate the gradient. I am giving you the default gradient line I have used without prefix.
background: linear-gradient(to right, #ffffff 0%,#ffffff 67%,#e5e3e6 66%,#f5f5f5 72%,#f5f5f5 100%);
What is the probable solution for that???
** This is a long page with short sidebar. But the background should be from top to bottom.
If you need live link, I have that. https://blog.measuredsearch.com/

Answer 1

Try this background for container_wrap class
#main .container_wrap
{
background:-webkit-linear-gradient(left, #ffffff 0%,#ffffff 50%,#e5e3e6 66%,#f5f5f5 72%,#f5f5f5 100%);
}

Answer 2

Rather than applying the background to the entire container and setting percentages at which the gradient should start so that it fits over the aside I recommend applying this only to the aside and adjusting the styling accordingly.
As well as issues with resolution, you also have duplicate percentage values being stored.
aside{
width:30%;
float:left;
//background gradient definition here
}
http://jsfiddle.net/ky9enkb4/

Answer 3

Browser show you correct result. As a fast variant media queries for wide-screens
#media screen and (min-width: 1500px) #main .container_wrap {
background: linear-gradient(to right, #ffffff 0%,#ffffff 62%,#e5e3e6 66%,#f5f5f5 72%,#f5f5f5 100%);
}
Or just give width for white gradient width 62%. It will be normal.

Answer 4

I believe this is what you are trying to achieve
The whole page with background gradient from top to bottom. Starting with #fff to accommodate content section
The dark region to accommodate sidebar.
To maintain the stability with large and small screens.
What I have done
I have added the gradient to the body so that the left is white and right is dark color.
Different gradient whit only dark colors and ending with the same color that the body is ending with (You might have to check with really large screen if the shade difference occurs outside the container).
The container, aside to occupy height from top to bottom of the screen
Check out the Fiddle
body{background: linear-gradient(to right, #ffffff 0%,#ffffff 67%,#e5e3e6 66%,#cfd7da 72%,#cfd7da 100%);margin:0;}
.container{width:400px; margin:0 auto;background:#fff;height:100vh;border:1px solid #999;}
.content{width:70%; float:left;height:100vh;}
aside{width:30%; float:left;background: linear-gradient(to right, #acb9bf ,#cfd7da 72%,#cfd7da 100%);height:100vh;}

Answer 5

hi you may try this may this work for you
background: linear-gradient(to right, #ffffff 0%,#ffffff 0%,#e5e3e6 66%,#f5f5f5 72%,#f5f5f5 100%);