在子div內容下呈現父級背景圖像屬性

Question

我在CSS中有一個div結構，看起來像這樣。

<div style="background-image: url(my_url.ext)> 
    <div> 
     My content 1. 
    <div> 
    <div> 
     My content 2. 
    <div> 
</div> 

當網站顯示在手機上時，我希望background-image屬性顯示在內容div下面。我嘗試使用background-position屬性，但它沒有延長父div的長度，實際上隱藏了圖像。有沒有辦法做到這一點，而不是在父母<div>內設置單獨的<img>標籤？我的CSS類目前看起來是這樣的：

.myClass/root { 
    background-repeat: no-repeat; 
    height: 100%; 
    position: relative; 
} 

@media (desktop-breakpoint) { 
    .myClass/root { 
     position: relative; 
    } 

    .myClass/root .myClass/background { 
     background-size: cover; 
     bottom: 0; 
     left: 0; 
     position: absolute; 
     right: 0; 
     top: 0; 
     z-index: -1; 
    } 
} 

@media (mobile-breakpoint) { 
    .myClass/root { 
     display: flex; 
     flex-direction: column; 
     min-height: 100%; 
    } 

    .myClass/root .myClass/background { 
     background-size: cover; 
     flex-grow: 1; 
    } 
} 

Answer 1

這個作品

#parent{ 
    height:auto; 
    width: auto; 
    color:#fff; 
    position:relative; 
} 
#parent:after{ 
    content: ""; 
    height:100%; 
    width: 100%; 
    position: absolute; 
    left:0; 
    top:0; 
    background-position:center center; 
    background-size: cover; 
    background-clip: content-box; 
    background-image: url(https://images.pexels.com/photos/110147/pexels-photo-110147.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb); 
    z-index:-1; 
} 

@media(max-width: 767px){ 
    #parent div{ 
    background: #000; 
    } 
    #parent:after{ 
    content: ""; 
    height:50px; 
    width: 100%; 
    position: relative; 
    display:block; 
    background-position:center center; 
    background-size: cover; 
    background-clip: content-box; 
    background-image: url(https://images.pexels.com/photos/110147/pexels-photo-110147.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb); 
    z-index: 50; 
} 
} 

，而你的HTML如下

<div id="parent"> 
    <div> 
     My content 1. 
    </div> 
    <div> 
     My content 2. 
    </div> 
</div> 

working fiddle