background-imageを divの中で左寄せしたいです。　(back-ground-positionは作動せず。。)

background-positionを使えば、background-imageは左寄せになると思ったのですが、なりませんでした。
現在、imageがdivの枠いっぱいに広がってしまっている状態です。
枠内で、左に綺麗に寄せたいです。

どなたか宜しくお願い致します。????

HTML
1
2<div class="ppp">
3  <div class="container">
4    <div class="row">
5      
6
7        <div class="col-12 col-lg-4">
8          <div class="set">
9            <h5>初期設定</h5>
10            <p>ホスティング入門ガイド</p>
11          </div>
12        </div>
13  
14        <div class="col-12 col-lg-4">
15          <div class="safe">
16            <h5>安全</h5>
17            <p>ホストを守るAirbnbの仕組み</p>
18          </div>
19        </div>
20  
21        <div class="col-12 col-lg-4">
22          <div class="money">
23            <h5>マネープラン</h5>
24            <p>Airbnbで収益を得るには</p>
25          </div>
26        </div>
27
28     
29    </div>
30  </div>
31</div>

CSS
1
2h5 {
3  font-weight: bold;
4  font-size: 16px;
5}
6.ppp p {
7  font-size: 14px;
8}
9
10.set{
11  border: solid rgb(116, 113, 113) 2px;
12  border-radius: 3px;
13  box-shadow:2px 2px 1px ;
14  width: 100%;
15  height: 100px;
16  padding-top: 20px;
17  padding-left: 10px;
18  display: flex;
19  background-image: url("../entrance.jpg");*/????????????????????????*/
20  background-position: 0 0 ;     */????????????????*/
21}
22
23.set img {
24  width: 100px;
25  height: 100px;
26}
27
28

kei344

2020/02/11 11:51

「作動しません」とは「何をしたときに」「どうなると思って」「どうなったのか」を、具体的に記述されたほうが回答を得られやすいと思います。

kazuki_user

2020/02/11 12:06

返信ありがとうございます。 background-positionを使えば、background-imageは左寄せになると思ったのですが、なりませんでした。現在、imageがdivの枠いっぱいに広がってしまっている状態です。枠内で、左に綺麗に寄せたいです。

kei344

2020/02/11 12:10

この「質問への追記・修正の依頼」の部分はデフォルトで表示されませんので、質問本文を修正することをお勧めします。また、「????」の部分はCSSの記述として間違っています。コメントとして書き込むなら「/* コメント */」のようにCSSの構文を使ってください。

kazuki_user

2020/02/11 12:19

了解です。ありがとうございます。

hatena19

2020/02/11 15:39

画像のサイズはいくつですか？

行動規範の内容に同意します

回答2件

エスパー回答にチャレンジ

css
1.set{
2  border: solid rgb(116, 113, 113) 2px;
3  border-radius: 3px;
4  box-shadow:2px 2px 1px ;
5  width: 100%;
6  height: 100px;
7  padding-top: 20px;
8  padding-left: 10px;
9  display: flex;
10  background-image: url("https://placehold.jp/100x100.png");
11  background-position: 0 0 ; 
12  background-repeat: no-repeat; /*これを追加*/
13}