背景が間違っている、何をするかわからない

Question

私はCSSには新しく、イラストレーター（ウェブ）で何かを作って、これをCSSの背景イメージとして入れたいと思っていました。私は<div>の画像を入れました。ちょうどbackground-image: url(berg.jpg)と書いてありますが、URLは正しいと確信していますが、何も表示されません。その後、私はheight: 100%をCSSに入れて表示しましたが、それはすべて拡大されており、ズームのために画像の小さな角が表示されていました。これを正しく表示するにはどうしたらいいですか？画像サイズは幅：1366pxです。高さ：768ピクセル。

ご迷惑をおかけして申し訳ございませんが、私はそれを見つけることができませんでした。 Thxは事前に。

Answer 1

あなたのイメージはフルサイズで表示されています。 background-size属性をCSSに追加すると、サイズを定義できます。

すべてbackground-sizeのオプションについては、このリンクを参照してください： https://www.w3schools.com/cssref/css3_pr_background-size.asp

あなたはまた、画像を中心に持ってbackground-positionを定義することができ、など https://www.w3schools.com/cssref/pr_background-position.asp

---

CSSの例

#problem-image { 
     height: 200px; 
     width: 200px; 
     background-image: url('https://images.unsplash.com/photo-1463852247062-1bbca38f7805?auto=format&fit=crop&w=2255&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D'); 
    } 

    #correct-image { 
     height: 200px; 
     width: 200px; 
     background-image: url('https://images.unsplash.com/photo-1463852247062-1bbca38f7805?auto=format&fit=crop&w=2255&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D'); 
     background-size: cover; 
     background-position: center center; 
    } 

参照jsfiddle for full workingの例： https://jsfiddle.net/3o8b2e4s/

Answer 2

あなたはCSSコードにbakcground-size: cover;を入れてみることができます。これにより、幅や高さに関係なくdivの背景がすべて乱されます。