LWC Style 動的指定

HTML:

    <div class="picdiv">
        <!-- <img src={backpic}> -->
        <div class="picdivchild slds-text-heading_small">{checkNo}</div>
    </div>

CSS:
.picdiv {
    background-position: top right;
    background-repeat: no-repeat;
    background-size: 100%;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content:space-between;
}

.picdivchild {
    align-items: center;
    margin-top: 60%;
    margin-bottom: 5%;
}

JS:
    import gymsimgs from '@salesforce/resourceUrl/gymsimgs';
    hasRendered = false;
    renderedCallback() {
        if (this.hasRendered) return;
        this.hasRendered = true;
        const style = document.createElement('style');
        style.innerText = `.picdiv { background-image:url(${this.backpic}) }`;
        this.template.querySelector('.picdiv').appendChild(style);
    }

    get picb4() {
        return gymsimgs + '/ver_b_4.png';
    }

    get backpic() {
        return gymsimgs + '/ver_b_1.png';
    }

css 参考URL
Flex:
https://www.plusdesign.co.jp/blog/?p=8747