haikeichuouic

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

CSSを利用した、bodyタグに指定した背景画像を中央寄せして固定するための簡単な方法です。
投稿日: 2012/02/15
最終更新日: 2015/12/29
 

必ずといっていい程、忘れてしまう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背景にも画像が中央寄りになりますよ!

 
最新情報をお届けします
筆者のご紹介
角政典@moreiic
真性のお家大好きフリーランスです。プログラムよりご飯の方が断然好き!博多出身のデブデザイナー。インドアだけど遊んでくれる人募集中!
Twitter / google+
よく検索されてる記事