difficulty with html css position property

I have successfully replaced with the CSS code below an old frameset that gives me something looking like a 2-panel house window. With the frameset, that gives me two frames (the 2 glasses of the window) in which I can put a background image and text. I understand I have to create 2 containers and give the 'positions' of these containers to replicate the result but setting 'width' and 'height' to 'auto' (or anything else) does not seem to allow the browser to calculate the free space after setting other values like 'top' 'left' etc and I cannot find how to accomplish that. There seems to be something fundamental I am missing despite my apparent original success.
Its all done with 20px X 20px GIF images, tiled when necessary.

Can someone point me in the right direction?

Code:style>
.top_left_corner {
position: fixed; top: 0; left: 0; width: 20px; height: 20px; background-image: url("https://www.linuxquestions.org/questions/images/top_left_corner.gif");
}
.top_right_corner {
position: fixed; top: 0; right: 0; width: 20px; height: 20px; background-image: url("https://www.linuxquestions.org/questions/images/top_right_corner.gif");
}
.bottom_left_corner {
position: fixed; bottom: 0; left: 0; width: 20px; height: 20px; background-image: url("https://www.linuxquestions.org/questions/images/bottom_left_corner.gif");
}
.bottom_right_corner {
position: fixed; bottom: 0; right: 0; width: 20px; height: 20px; background-image: url("https://www.linuxquestions.org/questions/images/bottom_right_corner.gif");
}
.top_ {
position: absolute; top: 0; left: 20px; right: 20px; width: auto; height: 20px; background-image: url("https://www.linuxquestions.org/questions/images/top_.gif"); background-repeat: repeat-x;
}
.left {
position: absolute; top: 20px; bottom: 20px; left: 0; width: 20px; height: auto; background-image: url("https://www.linuxquestions.org/questions/images/left.gif");
}
.right {
position: absolute; top: 20px; bottom: 20px; right: 0; width: 20px; height: auto; background-image: url("https://www.linuxquestions.org/questions/images/right.gif");
}
.bottom {
position: absolute; bottom: 0; left: 20px; right: 20px; width: auto; height: 20px; background-image: url("https://www.linuxquestions.org/questions/images/bottom.gif"); background-repeat: repeat-x;
}
.middle {
position: absolute; top: 20px; bottom: 20px; right: 50%; width: 20px; height: auto; background-image: url("https://www.linuxquestions.org/questions/images/middle.gif"); background-repeat: repeat-y;
}
/* the following does not work */
.panel_left {
position: absolute: top: 25px; left: 25px; width: initial; height: initial; background-image: url("https://www.linuxquestions.org/questions/images/bg_image1.gif"); background-size: contain; background-repeat: no-repeat;
}
.panel_right {
position: absolute; top: 25px; right: 25px; width: initial; height: initial; background-image: url("https://www.linuxquestions.org/questions/images/bg_image2.gif"); background-size: cover; background-repeat: no-repeat;
}
</style>Thank you for your help.