Fullwidth background to the left - css

Question

Anyone who know how I write the css to get the background to be under left menu and than go out to the left; full width.
Back in the old days you could do this with frameset, but how about nowadays?
.currentpage-category {
main {
padding: 0;
}
#categoryWithSidemenu{
background: rgb(31,57,87);
background: linear-gradient(163deg, rgba(31,57,87,1) 0%, rgba(94,106,120,1) 100%);
background-size: 30% 100%;
background-repeat: no-repeat;
width: 100vw;
margin-left: calc((100% - 100vw) / 2);
.categoryContainer {
width: 100%;
padding: 20px 0 200px 0;
margin-right: auto;
margin-left: auto;
max-width: 1426px;
}
}
#categoryWithoutSidemenu {
padding: 100px 15px 120px;
}
}
This is what I have tried, but the "background-size" above doesn't work.

Answer 1

Thank for reply, but I found a solution by my self.
https://imgur.com/kWnl089
.currentpage-category {
main {
padding: 0;
}
#categoryWithSidemenu > * {
margin: 0;
}
#categoryWithSidemenu{
background-color: #1d2e42;
width: 100vw;
margin-left: calc((100% - 100vw) / 2);
.categoryContainer {
width: 100%;
padding: 0px 0 0px 0;
max-width: 1426px;
margin: 0 auto;
position: relative;
z-index: 2;
&:after {
content: " ";
display: block;
clear: both;
}
.sidebar {
width: 200px;
float: left;
min-height: 600px;
}
.side-content {
background: #1d2e42;
padding: 20px 20px 100px;
}
}
&:before {
content: " ";
z-index: 1;
display: block;
position: absolute;
left: 0;
top: 650px;
background: rgb(31,57,87);
background: linear-gradient(180deg, rgba(31,57,87,1) 0%, rgba(94,106,120,1) 100%);
width: 50%;
height: 100%;
}
}