月別アーカイブ: 2016年7月

背景指定

下記の表は左・中央・右/上・中央・下方向の繰り返し設定のタグ一覧です。

垂直方向の位置 タグ
左側に繰り返す background-image : url(画像のパス);
background-repeat : repeat-y;
background-position : left;
中央に繰り返す background-image : url(画像のパス);
background-repeat : repeat-y;
background-position : center;
右側に繰り返す background-image : url(画像のパス);
background-repeat : repeat-y;
background-position : right;
水平方向の位置 タグ
上側に繰り返す background-image : url(画像のパス);
background-repeat : repeat-x;
background-position : top;
中央に繰り返す background-image : url(画像のパス);
background-repeat : repeat-x;
background-position : center;
下側に繰り返す background-image : url(画像のパス);
background-repeat : repeat-x;
background-position : bottom;

画像の配置 タグ
左・上 background-image: url(画像のパス);
background-repeat: no-repeat;
background-position: left top;
もしくは
background-position: 0 0;

左・中央 background-image: url(画像のパス);
background-repeat: no-repeat;
background-position: left center;
もしくは
background-position: 0 50%;

左・下 background-image: url(画像のパス);
background-repeat: no-repeat;
background-position: left bottom;
もしくは
background-position: 0 100%;

中央・上 background-image: url(画像のパス);
background-repeat: no-repeat;
background-position: center top;
もしくは
background-position: 50% 0;

中央・中央 background-image: url(画像のパス);
background-repeat: no-repeat;
background-position: center center;
もしくは
background-position: 50% 50%;

中央・下 background-image: url(画像のパス);
background-repeat: no-repeat;
background-position: center bottom;
もしくは
background-position: 50% 100%;

右・上 background-image: url(画像のパス);
background-repeat: no-repeat;
background-position: right top;
もしくは
background-position: 100% 0;

右・中央 background-image: url(画像のパス);
background-repea : no-repeat;
background-position: right center;
もしくは
background-position: 100% 50%;

右・下 background-image: url(画像のパス);
background-repeat: no-repeat;
background-position: right bottom;
もしくは
background-position: 100% 100%;

キーワードによる指定の他に [px] [%] などもあり、こちらの方がより細かな設定が出来ます

スクロールさせない
body{
background-image: url(sample.gif);
background-repeat: no-repeat;
background-position: right top; /* background-position: 100% 0; */
background-attachment: fixed;
}