[HELP] CSS Question: How to restrict a background-color or background-image to a certain size

Hi forumfolk. Currently the background image I'm using in my styling is stretching with the character sheet window, and I'd prefer it to stick to the width of the CSS grid I've put it in. Anyone know how to do that? /* show the selected tab and structuring of grids */ .sheet-tabstoggle[value="stats"] ~ div.sheet-stats { display: grid; grid-template-columns: 95px 95px 95px 95px 95px 95px 95px 95px; grid-template-rows: 3fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr fit-content() fit-content() fit-content() 2fr fit-content() fit-content() fit-content() fit-content() 2fr fit-content() 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr; justify-content: center; background-image: linear-gradient(to left top, #6b7d97, #364e6c); } .sheet-tabstoggle[value="details"] ~ div.sheet-details { display: grid; grid-template-columns: 190px 190px 380px; grid-template-rows: 100px 750px; justify-content: center; background-image: linear-gradient(to right top, #6b7d97, #364e6c); }

Look at my "Feast of Legends" sheet for an example. it's background-size:

I tried that, setting only a width (can't set a height for the sheet because the height is flexible depending on the number or repeating sections the player adds) but it messed up my gradient in a weird way. I now realize that I needed to also use background-repeat: no-repeat; to keep it from continuing to spread out across the area of the window and background-position: center; to match my justify-content: center; so it would stay in the same place as the rest of the character sheet. Thank you for the pointer, Andreas!