Change bacground color of sidebar

HELLO MIKE : please change your image-hoster – it is horrible

popups and other nefarious sites as they all open up – not always – but more and more often. Also the Kriesi page will be closed etc. pp.
Please!

________

On Ismaels code i see there was a little inconsitency: if there is a color-section with background-image on top – like here f.e:
https://kriesi.at/themes/enfold-2017/blog/blog-single-author-small/ his code will end in a colorized top color-section too:
So we can use an attribute selector – only if there was no background-image on container.wrap the code will do the job:

@media only screen and (min-width: 768px) {
  .container_wrap.sidebar_right:not([style*="background-image"]):before {
      content: '';
      display: block;
      position: absolute;
      right: 0;
      top: 0;
      background: #ddd;
      height: 100%;
      width: calc(30%);
  }
}

if you got sidebar left the change it to: .container_wrap.sidebar_left.

with the code of ismael mentioned here: Link
and my little added selector
the whole sidebar is colorized ( till footer) : ( you have only to adjust the percentage to your enfold width options.

Yes but – it is not quiet easy as i thought first:
if this is the setting: https://kriesi.at/support/topic/change-bacground-color-of-sidebar/#post-1192188
we have for the content: 1310px because of left right padding of 50px.
for the : template-page content it is : 956,3px (73% of 1310px)
and for aside : 353,7px (27% of 1310px) but this ends on the right side without padding – if you want to colorize it looks better if you do a “pseudo padding” more background as the width of it is f.e. the 50px
…

hope you all will understand the calculations with the given comments:

/**** just for that example page 
***** don't know why there is container set to 95% 
***** so i first set it to 100% because it is better to understand
***** and 1410px with 50px padding left and right 
***** so template width is 1310px - content is 73% of that - aside ist 27%
*****  ****/

.container {
    width: 100% !important;
}

@media only screen and (min-width: 1410px) {
  .container_wrap.sidebar_right:not([style*="background-image"]):before {
      content: '';
      display: block;
      position: absolute;
      left: calc(50vw + 0.23*1310px);  
      top: 0;
      background: #ddd;
      height: 100%;
      width: calc(0.27*1310px + 50px);     /** 27% of 1310px + 50px   ** looks better **/
  }
}

/**  in case it should cover the whole background from aside start to screen width end  
@media only screen and (min-width: 1410px) {
  .container_wrap.sidebar_right:not([style*="background-image"]):before {
      content: '';
      display: block;
      position: absolute;
      left: calc(50vw + 0.23*1310px);
      top: 0;
      background: #ddd;
      height: 100%;
      width: calc(50vw - 0.23*1310px);
  }
}
***/

@media only screen and (max-width: 1409px) {
  .container_wrap.sidebar_right:not([style*="background-image"]):before {
      content: '';
      display: block;
      position: absolute;
      right: 0 ;
      top: 0;
      background: #ddd;
      height: 100%;
      width: calc(0.27*(100vw - 100px) + 50px)
  }
}

@media only screen and (max-width: 767px) {
  .container_wrap.sidebar_right:not([style*="background-image"]):before {
      display: none
  }
}