なぜこのCSSコードはバックグラウンドを繰り返さないのですか？

Question

.square2 { 
    background-image: url(favicon.png); 
    background-size: 300px; 
    width: 300px; 
    height: 300px; 
    border: 2px solid; 
    text-shadow: white 0px 0px 2px; 
    font-size: 16px; 
} 

画像は32×32ピクセルのファビコンです。さて、これはW3Schoolsのからのものである：デフォルト

は、背景画像が 要素の左上隅に配置され、両方の上下左右に繰り返されます。

background-sizeプロパティは幅のみを指定し、高さはautoです。したがって、コードが背景を繰り返すかどうかをどのように知ることができますか？ここでそれは垂直に繰り返すことができた。そして、ここでは、このコードでは、それはそれを繰り返し：ここ

<div class="tiledBackground"> 
</div> 

.tiledBackground { 
    background-image: url(https://mdn.mozillademos.org/files/8971/firefox_logo.png); 
    background-size: 150px; 
    width: 300px; 
    height: 300px; 
    border: 2px solid; 
    color: pink; 
} 

幅は150ピクセルに設定されているが、高さも自動で、なぜそれはイメージを伸ばしていないのですか？画像は2982x2808のFirefoxロゴです。あなたはそれを高さを固定している

Answer 1

：

background-size: 150px; 

それを削除してから追加しよう：

background-repeat: repeat; 

Answer 2

あなたは、コンテナの幅/高さを作った場合は32×32のファビコンを繰り返すことになりますこのように背景サイズを小さくする（背景サイズを32pxにする（または、実際には画像のデフォルトサイズにしたい場合はそのプロパティを削除することができます）：

.square2 { 
    background-image: url(favicon.png); 
    background-size: 32px; 
    width: 300px; 
    height: 300px; 
    border: 2px solid; 
    text-shadow: white 0px 0px 2px; 
    font-size: 16px; 
} 

同様に、投稿した2番目の例も同様ですが、300x300pxのコンテナで背景イメージを150ピクセル幅に設定しています。

background-repeat: repeat-y; 

Answer 3

背景画像は、デフォルトで繰り返すように設定されています

は、垂直方向にのみ使用することを繰り返します。しかし、一定の高さと幅を持つdivの内側に背景画像を繰り返して、次のことができ、次のいずれか

1. はdiv要素の幅と高さよりも小さくなっている画像を選択してください。

2. divの幅と高さよりも小さい値にbackground-sizeを定義します。

ここでは、background-size：300px autoを追加したいと思います。または単にbackground-size：300px。 size autoは常にイメージの実際のサイズの縦横比を維持するので、繰り返しなくてもdivの完全な背景を埋めるでしょう。

最初のケースでは、画像サイズは32X32pxです。background-size：300px auto;背景サイズを作成します：300px 300px;

2番目のケースでは、画像サイズは2982X2808 pxで、背景サイズは150pxです。サイズ150X141 pxの背景イメージが繰り返し表示されます。

このヘルプが必要です。