CSSでbody指定の背景を中央寄せする簡単な方法!確実に忘れそうだから備忘録

 

必ずといっていい程、忘れてしまうCSSで背景画像の中央寄せ

 

今回はbodyタグの背景画像を中央寄せする

<STYLE type="text/css">
<!--
body {
	background-image:url("/*背景画像のURL*/");
	background-repeat:no-repeat;
	background-position: 50% 50%;
	background-attachment:fixed;
}
-->
</STYLE>

簡単ですね。
もう、終わっちゃったので上から順に解説しましょう!

背景画像の指定をする

background-image: url("/*背景画像のURL*/");

背景画像の繰り返しをさせない

background-repeat: no-repeat;

背景画像のポジションを左右に50%余裕を持たせる

background-position: 50% 50%;

背景画像をガッチリ固定する

background-attachment:fixed;

ポジションの指定をcenterとかにしちゃうよね!

直接の記述(インライン)ならこの方法で!

<body style="background-image: url("/*背景画像のURL*/");background-repeat: no-repeat;background-position: 50% 50%;background-attachment:fixed;"> 

これであなたのサイトのbody背景にも画像が中央寄りになりますよ!

投稿日: 2012/02/15
最終更新日: 2015/12/29
 
筆者のご紹介
角政典@moreiic
真性のお家大好きフリーランスです。プログラムよりご飯の方が断然好き!博多出身のデブデザイナー。インドアだけど遊んでくれる人募集中!
よく検索されてる記事