Roll Template Issue

Building a new character sheet for a game I plan to run later in the year. I like to use custom roll templates but am having an issue that the subtitle image isn't filling the area and it has a white space around the bottom and sides.&nbsp; I am using the exact same information as the title currently (will change the alignment of the subtitle text and use a different image once I resolve this issue). Here is the code for just that section of the roll template: .sheet-rolltemplate-DHBase .sheet-subtitle {&nbsp; &nbsp; background-color: #FF0000; &nbsp; /* change text-align to center to center the header text */ &nbsp; text-align: right; &nbsp; color: var(--header-text-color); &nbsp; &nbsp;background: url(<a href="https://i.imgur.com/GchiXyS.png" rel="nofollow">https://i.imgur.com/GchiXyS.png</a>) top left repeat; &nbsp;background-size: 270px 25px; &nbsp; &nbsp; background-repeat: repeat; &nbsp; &nbsp; font-family: "Courier New", Courier, monospace; &nbsp; &nbsp; font-weight: bold; &nbsp; &nbsp; font-size: 1em; &nbsp; &nbsp; color: #FF0000; &nbsp; &nbsp; text-shadow: -1px -1px 0 #000000, &nbsp; &nbsp; 1px -1px 0 #000000, &nbsp; &nbsp; -1px 1px 0 #000000, &nbsp; &nbsp; 1px 1px 0 #000000,&nbsp;&nbsp; &nbsp; &nbsp; -2px 0 0 #000000, &nbsp; &nbsp; 2px 0 0 #000000, &nbsp; &nbsp; 0 2px 0 #000000, &nbsp; &nbsp; 0 -2px 0 #000000; &nbsp; /* Header formatting - modify the column layout below */ &nbsp; grid-template-columns: auto auto; &nbsp; /* Line height to match default roll template */ &nbsp; line-height:1.1em; } And for those who like extra detail, here is the entire CSS for the roll template. .sheet-rolltemplate-DHBase { &nbsp; margin-left: -37px; } .withoutavatars .sheet-rolltemplate-DHBase { &nbsp; margin-left: -7px; &nbsp; &nbsp; width: 100%; &nbsp; &nbsp; padding: 2px; &nbsp; &nbsp; background:url(<a href="https://i.imgur.com/Wl60R3R.jpg" rel="nofollow">https://i.imgur.com/Wl60R3R.jpg</a>) top left repeat; } .sheet-rolltemplate-DHBase .sheet-container { &nbsp; border: 1px solid; &nbsp; /* by default, the border is the same color as the header. You can change this here, e.g. to black */ &nbsp; border-color: var(--header-bg-color); } /* Header formatting - title and subtitle */ .sheet-rolltemplate-DHBase .sheet-header { &nbsp; background-color: var(--header-bg-color); &nbsp; /* change text-align to center to center the header text */ &nbsp; text-align: right; &nbsp; color: var(--header-text-color); &nbsp; padding: 5px; &nbsp; &nbsp;background: url(<a href="https://i.imgur.com/GchiXyS.png" rel="nofollow">https://i.imgur.com/GchiXyS.png</a>) top left no-repeat; &nbsp;background-size: 270px 25px; &nbsp; &nbsp; background-repeat: no-repeat; &nbsp; &nbsp; font-family: "Courier New", Courier, monospace; &nbsp; &nbsp; font-weight: bold; &nbsp; &nbsp; font-size: 1em; &nbsp; &nbsp; color: #FF0000; &nbsp; &nbsp; text-shadow: -1px -1px 0 #000000, &nbsp; &nbsp; 1px -1px 0 #000000, &nbsp; &nbsp; -1px 1px 0 #000000, &nbsp; &nbsp; 1px 1px 0 #000000,&nbsp;&nbsp; &nbsp; &nbsp; -2px 0 0 #000000, &nbsp; &nbsp; 2px 0 0 #000000, &nbsp; &nbsp; 0 2px 0 #000000, &nbsp; &nbsp; 0 -2px 0 #000000; &nbsp; /* Header formatting - modify the column layout below */ &nbsp; grid-template-columns: auto auto; &nbsp; /* Line height to match default roll template */ &nbsp; line-height:1.1em; } .sheet-rolltemplate-DHBase .sheet-name { &nbsp; &nbsp; display: grid; &nbsp; background: url(<a href="https://i.imgur.com/Wl60R3R.jpg" rel="nofollow">https://i.imgur.com/Wl60R3R.jpg</a>) top left repeat; &nbsp;background-size: 270px 270px; &nbsp; &nbsp; background-repeat: no-repeat; &nbsp; &nbsp; font-family: "Courier New", Courier, monospace; &nbsp; &nbsp; font-weight: bold; &nbsp; &nbsp; font-size: 1em; &nbsp; &nbsp; color: #FF0000; &nbsp; &nbsp; text-shadow: -1px -1px 0 #000000, &nbsp; &nbsp; 1px -1px 0 #000000, &nbsp; &nbsp; -1px 1px 0 #000000, &nbsp; &nbsp; 1px 1px 0 #000000,&nbsp;&nbsp; &nbsp; &nbsp; -2px 0 0 #000000, &nbsp; &nbsp; 2px 0 0 #000000, &nbsp; &nbsp; 0 2px 0 #000000, &nbsp; &nbsp; 0 -2px 0 #000000; &nbsp; /* Header formatting - modify the column layout below */ &nbsp; grid-template-columns: auto auto; &nbsp; /* Line height to match default roll template */ &nbsp; line-height:1.1em; } .sheet-rolltemplate-DHBase .sheet-subtitle {&nbsp; &nbsp; background-color: #FF0000; &nbsp; /* change text-align to center to center the header text */ &nbsp; text-align: right; &nbsp; color: var(--header-text-color); &nbsp; &nbsp;background: url(<a href="https://i.imgur.com/GchiXyS.png" rel="nofollow">https://i.imgur.com/GchiXyS.png</a>) top left repeat; &nbsp;background-size: 270px 25px; &nbsp; &nbsp; background-repeat: repeat; &nbsp; &nbsp; font-family: "Courier New", Courier, monospace; &nbsp; &nbsp; font-weight: bold; &nbsp; &nbsp; font-size: 1em; &nbsp; &nbsp; color: #FF0000; &nbsp; &nbsp; text-shadow: -1px -1px 0 #000000, &nbsp; &nbsp; 1px -1px 0 #000000, &nbsp; &nbsp; -1px 1px 0 #000000, &nbsp; &nbsp; 1px 1px 0 #000000,&nbsp;&nbsp; &nbsp; &nbsp; -2px 0 0 #000000, &nbsp; &nbsp; 2px 0 0 #000000, &nbsp; &nbsp; 0 2px 0 #000000, &nbsp; &nbsp; 0 -2px 0 #000000; &nbsp; /* Header formatting - modify the column layout below */ &nbsp; grid-template-columns: auto auto; &nbsp; /* Line height to match default roll template */ &nbsp; line-height:1.1em; } /* Allprops part */ .sheet-rolltemplate-DHBase .sheet-content { &nbsp; display: grid; &nbsp; &nbsp;text-align: left; &nbsp; &nbsp;background: url(<a href="https://i.imgur.com/Wl60R3R.jpg" rel="nofollow">https://i.imgur.com/Wl60R3R.jpg</a>) top left repeat; &nbsp;background-size: 270px 270px; &nbsp; &nbsp; background-repeat: repeat; &nbsp; &nbsp; font-family: "Courier New", Courier, monospace; &nbsp; &nbsp; font-weight: bold; &nbsp; &nbsp; font-size: 1em; &nbsp; &nbsp; color: #FF0000; &nbsp; &nbsp; text-shadow: -1px -1px 0 #000000, &nbsp; &nbsp; 1px -1px 0 #000000, &nbsp; &nbsp; -1px 1px 0 #000000, &nbsp; &nbsp; 1px 1px 0 #000000,&nbsp;&nbsp; &nbsp; &nbsp; -2px 0 0 #000000, &nbsp; &nbsp; 2px 0 0 #000000, &nbsp; &nbsp; 0 2px 0 #000000, &nbsp; &nbsp; 0 -2px 0 #000000; &nbsp; /* Header formatting - modify the column layout below */ &nbsp; grid-template-columns: auto auto; &nbsp; /* Line height to match default roll template */ &nbsp; line-height:1.4em; } .sheet-rolltemplate-DHBase .sheet-content &gt; div { &nbsp; padding: 5px; } /* Left column */ .sheet-rolltemplate-DHBase .sheet-content .sheet-key { &nbsp; font-weight: bold; &nbsp; padding-right: 10px; &nbsp; text-align: right; } /* Empty rule, use this if you want to change the right column&nbsp; .sheet-rolltemplate-custom .sheet-value { } */ /* Description field */ .sheet-rolltemplate-DHBase .sheet-desc { &nbsp; grid-column: span 2; &nbsp; padding: 5px; &nbsp; text-align: center; }

might be the way the html elements are arranged in the html side of the code.&nbsp; i made a similar template and i got rid of some of the white spaces by reducing margin and removing padding

I suggest you open the Developer tools (F12) and Inspect the Subheader row that you mention. If you look at the Elements and Styles you can see for that element what the active styles are and where they are configured. Some people also miss the fact that you modify the styles in the F12 Styles section, so go in there and remove padding and margins if there are any to then follow up with actually updating those in your CSS later if they fix your issue. You could also in this case see if width: 100% does the trick, you can test that on the element itself through the element.style part of F12 Styles or you can add into the specific classes that the element receives its styles from (also then seeing the effects on the rest of the sheet/template). No specific answers, but perhaps some help in analysing what is going on (for you or anyone else who may need this tip)