I have a push menu that moves the main content container by adding margin-left to it. I'd like to be able to have a background image that behaves the same as https://music.amazon.co.uk/artists/B001DTRO4M/queen.
So far this is where I've got to in my codepen:
https://codepen.io/Maynards/pen/qBVLqLL
<div class="secondaryMenu">
<div class="secondaryMenuItem">
<div>Secondary Menu 1</div>
</div>
<div class="secondaryMenuItem active overlay">
<div>Secondary Menu 2</div>
</div>
<div class="secondaryMenuItem active">
<div>Secondary Menu 3</div>
</div>
</div>
<div class="primaryMenu">
<ul class="primaryMenuItems">
<li class="primaryMenuItem">
<div class="primaryMenuItemSelector">
<div>1</div>
<div class="primaryMenuItemExtra">Hidden Primary Menu Content</div>
</div>
</li>
<li class="primaryMenuItem">
<div class="primaryMenuItemSelector">
<div>2</div>
<div class="primaryMenuItemExtra">Hidden Primary Menu Content</div>
</div>
</li>
<li class="primaryMenuItem">
<div class="primaryMenuItemSelector">
<div>3</div>
<div class="primaryMenuItemExtra">Hidden Primary Menu Content</div>
</div>
</li>
</ul>
</div>
<div class="mainContent">
<div class"background">
<div class="backgroundImage" style="background-image: url("https://upload.wikimedia.org/wikipedia/commons/5/51/Test_grid_2000x2000.png");"></div>
<div class="backgroundGradient"></div>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
:root {
--maxNav-width: 288px;
--primaryNav-width: 56px; /* change to 288px to make full width */
--secondaryNav-width: 232px;
--secondaryNav-positionX: 0px; /* change to -232px to hide secondary menu */
}
body {
padding: 0;
margin: 0;
}
.mainContent {
margin-left: min(var(--maxNav-width), calc(var(--primaryNav-width) + var(--secondaryNav-width) + var(--secondaryNav-positionX)));
transition: margin-left 0.5s;
}
.content {
width: 100%;
padding: 64px 48px;
max-width: 1440px;
}
.primaryMenu {
height: 100%;
width: var(--primaryNav-width);
position: fixed;
top: 0px;
left 0px;
background-color: #333333;
overflow-x: hidden;
white-space: nowrap;
transition: width 0.5s;
}
.primaryMenuItems {
color: #FFFFFF;
padding: 0;
margin: 0;
list-style-type: none;
margin-left: 16px;
margin-top: 16px;
}
.primaryMenuItems > li {
margin-bottom: 16px;
}
.primaryMenuItemSelector {
display: flex;
}
.primaryMenuItemExtra {
margin-left: 36px;
}
.secondaryMenu {
width: var(--secondaryNav-width);
height: 100%;
position: fixed;
top: 0;
left: 56px;
overflow-x: hidden;
color: white;
transition: 0.5s;
transform: translateX(var(--secondaryNav-positionX)) translateZ(-1px);
}
.secondaryMenuItem {
position: fixed;
height: 100%;
width: 100%;
color: #FFFFFF;
background-color: #777777;
padding: 0;
margin: 0;
list-style-type: none;
display: none;
box-sizing: border-box;
z-index: 1;
}
.secondaryMenuItem.active {
display: flex;
}
.secondaryMenuItem.overlay {
z-index: 2;
}
.background {
height: 100%;
inset-inline-start: 0;
min-height: 100vh;
position: absolute;
inset-inline-end: 0;
top: 0;
z-index: -2;
}
.backgroundImage {
background-repeat: repeat-y;
transition: background-image 1s ease-in;
background-size: cover;
transform: translateZ(0);
background-attachment: fixed;
position: fixed !important;
background-position: center top;
width: 100%;
height: 100%;
top: 0;
inset-inline-start: 0;
z-index: -1;
transition: margin-left .5s;
margin-left: min(var(--maxNav-width), calc(var(--primaryNav-width) + var(--secondaryNav-width) + var(--secondaryNav-positionX)));
}
.backgroundGradient {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), #000000 100vh, #1f2222);
height: 100%;
max-height: 200vh;
position: sticky;
top: -100vh;
width: 100%;
z-index: -1;
}
I had got to a point where the image was showing with the gradient, but it wasn't resizing when the main content container shrinks. At the moment the codepen isn't showing the image at all and I'm not sure how I've gone backwards!
EDIT 1: more context & sample images
Desired effect is for the background image to be constrained to the container to the right of the menu (where the <p> text is). As I have it, the background image is being cut off on the left.
As a side note, I haven't been able to get the gradient on top of the background image and under the content either.
EDIT: Final solution
Using the accepted answer's solution, I ended up with this

