Too much dead space on Blog Post

Site URL: https://www.at17c.com/playground/concrete-floor-vol-1

Hi. 
I am currently creating a blog post in which I am embedding a spotify code to display a playlist. I want this placed on top of an image. Since Fluid Engine is not yet implemented for Blog Posts I have had to use CSS to do this. I have managed to (on desktop) to place the embedding on top of the image, but now I have way too much dead space underneath the image (because the embedding is still technically placed there, so that doesn't work. 
How do I get the Playlist on top without creating dead space?
I have attached a screenshot of how I would like it to be (here the embedding also has some padding). Currently I have just placed the playlist above the image. 
Password is "basement". 
TIA. 

On 10/14/2022 at 8:30 PM, at17c said:

Site URL: https://www.at17c.com/playground/concrete-floor-vol-1

Hi. 
I am currently creating a blog post in which I am embedding a spotify code to display a playlist. I want this placed on top of an image. Since Fluid Engine is not yet implemented for Blog Posts I have had to use CSS to do this. I have managed to (on desktop) to place the embedding on top of the image, but now I have way too much dead space underneath the image (because the embedding is still technically placed there, so that doesn't work. 
How do I get the Playlist on top without creating dead space?
I have attached a screenshot of how I would like it to be (here the embedding also has some padding). Currently I have just placed the playlist above the image. 
Password is "basement". 
TIA. 

My idea is using Css code to set the background:

#block-yui_3_17_2_1_1665739214059_9551 + .row {
  background-image: url('https://images.squarespace-cdn.com/content/v1/60af8b51412c937275f95f40/1665744963961-EQVUGV3WIZSR8I9VMLSB/IMG_4424-min.jpeg?format=1000w');
  padding-top: 20px;
  background-repeat: no-repeat;
  background-size: cover;
}

What do you think about it?

My testing

20 hours ago, bangank36 said:

My idea is using Css code to set the background:

#block-yui_3_17_2_1_1665739214059_9551 + .row {
  background-image: url('https://images.squarespace-cdn.com/content/v1/60af8b51412c937275f95f40/1665744963961-EQVUGV3WIZSR8I9VMLSB/IMG_4424-min.jpeg?format=1000w');
  padding-top: 20px;
  background-repeat: no-repeat;
  background-size: cover;;
}

What do you think about it?

Thanks a lot! 
It's close to being the way I wont it, but what happens now is that the (background)image is getting cropped. 
The image should be 1:1 aspect, and the Spotify Embed center on top. 
Also now it messes up mobile view (mobile view) doesnt need the the background image - it could just be Spotify Embed above image. 
Any solution?
TIA
Screenshot is the result the code makes. 

On 10/14/2022 at 3:48 PM, bangank36 said:

My testing

Hi again! Still no possible solution for this?
TIA

You can use the media query to set my customized code on desktop only

@media only screen and (min-width: 768px) {
  /*style for desktop and table display*/
}