CSS - 背景イメージは水平方向に伸び、垂直方向に繰り返しますか？

使用するbackground-size: coverページの全幅に合わせて背景を伸ばすことができます。CSS - 背景イメージは水平方向に伸び、垂直方向に繰り返しますか？

repeat-yを使用すると、ページの高さ全体に対して、背景の繰り返しまたは縦書きを縦にすることができます。

これらの2つの効果を組み合わせる方法はありますか？残念ながら、彼らは一緒に働くようには思われません（少なくともChromeでは）。私はbackground-size: coverで両方向に伸びるか、x方向に伸びるのではなくy方向に繰り返すことができるようです。

編集：background-size: 100% Npx（ここでNは画像の高さです）を使用して上記を達成できますが、一方向にしか伸びていないので、背景画像を歪ませます。それに比例してスケーリングを維持する方法はありますか？

2016-12-07 user35358

これはバックグラウンドサイズ：100％で行うことができます。 – Chiller

@Chiller正しいですが、xとyの両方を指定する必要があります。つまり、 'background-size：100％auto' – zgood

あなたは正しいと思いますが、ここに表示されている場合は、自動追加せずに動作します。https://jsfiddle.net/qp4093h2/ – Chiller

カバーの代わりに、background-size: 100% auto;を使用して、高さのアスペクト比を維持しながら、背景画像をフルブラウザ幅に調整します。これを垂直方向に並べるにはbackground-repeat: repeat-y;と組み合わせて使用してください。

2016-12-07 19:22:23

Ahh、ありがとうございます。 – user35358

バックグラウンドサイズxは100％幅なので、repeat-xはしないでください。実際にrepeat-yを指定する必要はありません。デフォルトにしておきますが、傷つけません。 – zgood

上記の 'auto'属性は高さを指定しているので、' background-size：100％150px;というコードのように固定された高さに置くと、画像は水平に伸びます150ピクセルのサイズを維持します –

答えて