After experiencing an issue with the background image not fitting the content properly at different resolutions, I attempted to divide the background into three parts and automatically stretch the middle section to fill the space between the top and bottom images. Unfortunately, I couldn't figure out how to accomplish this using CSS. Can someone provide guidance on the exact steps needed to achieve this?
Specifications of the background images:
content_background_top.png: 1024 x 68px
content_background_middle.png: 1024 x 6px (Stretchable)
content_background_bottom.png: 1024 x 71px
An example code snippet of what I tried:
#content{
width: 1024px;
height: 950px;
text-align: center;
padding: 35px 0 35px 0;
background: url(img/content_background_top.png), url(img/content_background_middle.png), url(img/content_background_bottom.png);
background-repeat: no-repeat;
background-size: 1024px 68px, 1024px auto, 1024px 71px;
}