フレックスコンテナのCSS背景イメージ

Question

テキストに背景イメージを配置する必要があります。私はそれが "div"にあまりにも多くのクラスを入れ子にしているにもかかわらず、それを理解できないと思う。

CSS：

.box { 
    display: flex; 
    top: 80px; 
    position: relative; 
    padding-top: 30px; 
    border-top: thin solid black; 
    border-bottom: thin solid black; 
    border-right: thin solid black; 
    border-left: thin solid black; 
} 

.box1 { 
    padding-left: 300px; 
    padding-right: 30px; 
    width: 630px; 
    flex-direction: column; 
    align-self: flex-start; 
} 

.smalltitle2 { 
    border-bottom: medium solid black; 
    background-image: url("https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-news-bite.png"); 
    background-repeat: no-repeat; 
} 

はHTML：

<div class="box"> 
    <div class="box1"> 
    <div class="smalltitle2">Mother of Three Buys Tuna Steak at Phish Concert. Leaves, "Feeling Funny."</div> 
    </div> 
</div> 

Answer 1

があなたのsmalltitle2コンテナに幅と高さを追加し、あなたはそれが画像の一部であるべきかどうか、それが見えるようにしたいどのように周りに微調整することもできますし、全体のイメージをしたいですか：

デモはこちらをご覧ください（background-sizeを使用してください）。

.box { 
 
    display: flex; 
 
    top: 80px; 
 
    position: relative; 
 
    padding-top: 30px; 
 
    border-top: thin solid black; 
 
    border-bottom: thin solid black; 
 
    border-right: thin solid black; 
 
    border-left: thin solid black; 
 
} 
 

 
.box1 { 
 
    padding-left: 300px; 
 
    padding-right: 30px; 
 
    width: 630px; 
 
    flex-direction: column; 
 
    align-self: flex-start; 
 
} 
 

 
.smalltitle2 { 
 
    border-bottom: medium solid black; 
 
    background:url(https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-news-bite.png); 
 
    background-repeat: no-repeat; 
 
    background-size: contain; 
 
    width:100%; 
 
    height:100px; 
 
}

<div class="box"> 
 
    <div class="box1"> 
 
    <div class="smalltitle2">Mother of Three Buys Tuna Steak at Phish Concert. Leaves, "Feeling Funny."</div> 
 
    </div> 
 
</div>

Answer 2

あなたはbackground-size: contain;またはbackground-size: cover;など

CSSには問題はありませんを試すことができますいずれか、それだけで定義するためのルールが欠落していますあなたの背景イメージのサイズhttps://jsfiddle.net/v8eLsef4/1/