CSS技术问询：背景图占满div宽高且不裁切边框的实现方案

需求描述 #

• 背景图片完全占据div的100%宽度和高度，且不会被div的圆角边框裁切
• 容器在移动端切换为垂直布局时，背景图仍需填满容器的全部空间
• 不采用手动添加边框的解决方案

原代码 #

CSS代码 #

.flex {
    display: flex;
    height: 207px;
}

.pil1 {
    height: 100% !important;
    width: 600px;
    border-top-left-radius: 104px;
    border-bottom-left-radius: 104px;
    background-image: url("../images/backgrounds/main_banner_bg_left.svg");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.pil2 {
    height: 100% !important;
    width: 600px;
    border-top-right-radius: 104px;
    border-bottom-right-radius: 104px;
    background-image: url("../images/backgrounds/main_banner_bg_right.svg");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

@media screen and (max-width: 900px) {
    .flex {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }

    .pil1 {
        /* height: 100%; */
        width: 600px;
        border-radius: 104px;
        background-image: url("../images/backgrounds/main_banner_bg_mobile.svg");
        background-size: auto 100%;
        background-repeat: no-repeat;
        background-position: center;
    }

    .pil2 {
        /* height: 100%; */
        border-radius: 104px;
        background-image: url("../images/backgrounds/main_banner_bg_mobile.svg");
        background-size: auto 100%;
        background-repeat: no-repeat;
        background-position: center;
    }
}

HTML代码 #

<div class="container-fluid container_first">
    <div class="container">
        <div class="flex">
            <div class="pil1">
                <h1>Content</h1>
            </div>
            <div class="pil2">
                <h1>content</h1>
            </div>
        </div>
    </div>
</div>

解决方案 #

核心调整点 #

1. 避免背景被圆角裁切：添加background-clip: padding-box，让背景仅在容器的padding区域内显示（不会延伸到边框下方），彻底解决圆角裁切背景的问题。
2. 确保背景完全填满容器：统一设置background-size: 100% 100%，配合background-position: center保证背景居中且完全覆盖容器，移动端无需单独调整尺寸规则。
3. 优化容器宽度适配：将固定宽度width: 600px改为max-width: 600px; width: 100%，避免小屏幕下容器超出视口范围。
4. 精简冗余代码：移除不必要的!important声明，合并重复的CSS属性，提升代码可维护性。

优化后的代码 #

CSS代码

.flex {
    display: flex;
    height: 207px;
}

.pil1, .pil2 {
    height: 100%;
    max-width: 600px;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    background-clip: padding-box;
}

.pil1 {
    border-top-left-radius: 104px;
    border-bottom-left-radius: 104px;
    background-image: url("../images/backgrounds/main_banner_bg_left.svg");
}

.pil2 {
    border-top-right-radius: 104px;
    border-bottom-right-radius: 104px;
    background-image: url("../images/backgrounds/main_banner_bg_right.svg");
}

@media screen and (max-width: 900px) {
    .flex {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }

    .pil1, .pil2 {
        border-radius: 104px;
        background-image: url("../images/backgrounds/main_banner_bg_mobile.svg");
    }
}

HTML代码

<div class="container-fluid container_first">
    <div class="container">
        <div class="flex">
            <div class="pil1">
                <h1>Content</h1>
            </div>
            <div class="pil2">
                <h1>content</h1>
            </div>
        </div>
    </div>
</div>

内容的提问来源于stack exchange，提问作者mood98