1. ホーム
  2. css

[解決済み] CSSで背景画像にサイズを設定する?

2022-03-23 20:54:15

質問

CSSで背景画像の大きさを設定することは可能ですか?

というようなことをしたいのですが。

background: url('bg.gif') top repeat-y;
background-size: 490px;

でも、そういうやり方は全然ダメみたいですね......。

解決方法は?

CSS2

画像を大きくする必要がある場合は、画像エディタで画像そのものを編集する必要があります。

imgタグを使えばサイズは変えられますが、他のコンテンツの背景にしたい場合などには望んだ結果にはなりません(繰り返しもできないでしょうし)......。

CSS3 <サブ 力を解き放つ

これをCSS3で実現するためには background-size .

最近のブラウザはすべてこれをサポートしているので、古いブラウザに対応する必要がない限り、この方法で対応できます。
<サブ 対応するブラウザ
Mozilla Firefox 4.0+ (Gecko 2.0+), Microsoft Internet Explorer 9.0+, Opera 10.0+, Safari 4.1+ (webkit 532), Chrome 3.0+に対応。

.stretch{
/* Will stretch to specified width/height */
  background-size: 200px 150px;
}
.stretch-content{
/* Will stretch to width/height of element */
  background-size: 100% 100%;
}

.resize-width{
/* width: 150px, height: auto to retain aspect ratio */
  background-size: 150px Auto;
}
.resize-height{
/* height: 150px, width: auto to retain aspect ratio */
  background-size: Auto 150px;
}
.resize-fill-and-clip{ 
  /* Resize to fill and retain aspect ratio.
     Will cause clipping if aspect ratio of box is different from image. */ 
  background-size: cover;
}
.resize-best-fit{
/* Resize to best fit and retain aspect ratio.
   Will cause gap if aspect ratio of box is different from image. */ 
  background-size: contain;
}

特に、私が気に入っているのは covercontain の値によって、以前にはなかった新しい制御の力を得ることができます。

ラウンド

また background-size: round は、repeatとの組み合わせで意味を持つ。

.resize-best-fit-in-repeat{
/* Resize to best fit in a whole number of times in x-direction */ 
  background-size: round auto; /* Height: auto is to keep aspect ratio */
  background-repeat: repeat;
}

これは、画像の幅を調整して、背景の位置決め領域に整数倍で収まるようにするものです。


追記
必要なサイズが静的なピクセルサイズである場合、実際の画像を物理的にリサイズすることが賢明です。これは、リサイズの質を高めるため(画像ソフトがブラウザよりも良い仕事をしてくれることを前提に)と、元の画像が表示するものよりも大きい場合に帯域幅を節約するための両方があります。