[解決済み] CSSで背景画像を中央に配置する
2022-04-21 08:30:47
質問
背景画像を中央に配置したい。divは使われておらず、これは CSS のスタイルになります。
body{
background-position:center;
background-image:url(../images/images2.jpg) no-repeat;
}
上記のCSSは全体にタイルを貼り、中央揃えにしていますが、画像の半分は見えず、ただなんとなく上に移動しています。画像の中央に表示させたいのですが、どうすればよいでしょうか?21"の画面でも見えるように採用できないでしょうか?
解決方法を教えてください。
background-image: url(path-to-file/img.jpg);
background-repeat:no-repeat;
background-position: center center;
これでうまくいくはずです。
そうでない場合は
div
を画像と一緒に使用し
z-index
を使えば、それを背景にすることができますか?これなら、ボディに背景画像を配置するよりも、ずっと簡単にセンタリングできますね。
それ以外のトライ。
background-position: 0 100px;/*use a pixel value that will center it*/
または、ボディを設定した場合は50%でもいいと思います。
min-height
を100%に設定します。
body{
background-repeat:no-repeat;
background-position: center center;
background-image:url(../images/images2.jpg);
color:#FFF;
font-family:Arial, Helvetica, sans-serif;
min-height:100%;
}
関連
-
cssで背景色の半透明化を実現する2つの方法
-
[CSSチュートリアル]CSS動的高さ遷移のアニメーション効果の実装の
-
[CSSチュートリアル】擬似要素で実現する中空三角矢印とXアイコンの例
-
[CSSチュートリアル】カラフルで知的なシャドウ効果を実現するCSS
-
[解決済み] CSSの親セレクタはありますか?
-
[解決済み] CSSでcellpaddingとcellspacingを設定する?
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] .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チュートリアル]CSSで簡単!高周波な異形ボタンを実現する方法
-
[CSSチュートリアル】CSSスコープ(スタイル分割)の使い方まとめ
-
[CSSチュートリアル]cssの位置固定コードで左右2重の位置決め
-
[CSSチュートリアル】position:stickyでトップ吸い上げアプレット問題を完璧に解決
-
[CSSチュートリアル】CSSプロパティ*-gradientの有用性を探る
-
[css3] CSS3を使ってヘッダーアニメーション効果を作成する
-
[css3]css3によるフレックスレイアウト幅の解決方法が有効でない件
-
[css3]本のページをめくるような効果を実現するcss3サンプルコード
-
[CSSチュートリアル】CSS複合セレクタの具体的な使用方法
-
[解決済み] CSS背景のストレッチとスケール