[解決済み] 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;
}
特に、私が気に入っているのは
cover
と
contain
の値によって、以前にはなかった新しい制御の力を得ることができます。
ラウンド
また
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;
}
これは、画像の幅を調整して、背景の位置決め領域に整数倍で収まるようにするものです。
追記
必要なサイズが静的なピクセルサイズである場合、実際の画像を物理的にリサイズすることが賢明です。これは、リサイズの質を高めるため(画像ソフトがブラウザよりも良い仕事をしてくれることを前提に)と、元の画像が表示するものよりも大きい場合に帯域幅を節約するための両方があります。
関連
-
[CSSチュートリアル】ボックス内の複数要素を両端揃えの効果で実現するCSS
-
[css3]グレーモードやブラックモードを実現するCSS3フィルター(フィルター)サンプルコード(Webページ用
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] CSSの親セレクタはありますか?
-
[解決済み] CSSでcellpaddingとcellspacingを設定する?
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] CSSのdisplayプロパティで遷移する
-
[解決済み] スクロールバーを隠すが、スクロールはできる状態
-
[解決済み] CSS画像を背景で伸縮させる - CSSのみで可能
-
[解決済み】HTML5入力のプレースホルダの色をCSSで変更する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[CSSレイアウト例】float(フロート)、position(ポジション)プロパティの差分によるCSSレイアウト
-
[CSSチュートリアル】CSS+HTMLで実現するトップナビゲーションバー機能
-
[CSSチュートリアル】CSSを解析して、画像のテーマカラー機能を抽出する(コツ)
-
[CSSチュートリアル】CSSもこんな風に遊べる?気まぐれグラデーションの極意
-
[CSSチュートリアル】position:stickyでトップ吸い上げアプレット問題を完璧に解決
-
[CSSチュートリアル】CSSで実現するイメージマッピングメソッド
-
[css3]赤いパケットのジッター効果を実現するCSS3
-
[CSSチュートリアル】カラフルで知的なシャドウ効果を実現するCSS
-
[CSSチュートリアル】CSSで実現できるのなら、わざわざJavaScriptを使う必要はない
-
[CSSチュートリアル]モバイルにおけるviewportの具体的な使い方