こんにちは！
UPSTARTSのSベンです！
今回は「背景」のスタイルについての内容です。
こちらのhtmlにスタイルをあてていきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<body> <p>ゴムゴム</p> <p>ヤミヤミ</p> <p>ゴロゴロ</p> <p>ピカピカ</p> <p>マグマグ</p> <p>ヒエヒエ</p> <p>グラグラ</p> <p>メラメラ</p> <p>ドクドク</p> <p>オペオペ</p> <p>イトイト</p> <p>カゲカゲ</p> <p>スナスナ</p> <p>ガスガス</p> <p>モクモク</p> <p>スケスケ</p> </body> |
背景のプロパティは種類がたくさんありますので、
一つずつ見ていきましょう。
目次
background-color
まずはbackground-colorですが、こちらは背景色を指定できるプロパティになります。
|
1 2 3 |
body { background-color: skyblue; } |
今回はbodyを指定しているので、背景全体がスカイブルーになります。
background-image
次にbackground-imageは、背景画像を設定できるプロパティになります。
|
1 2 3 |
body { background-image: url(meramera.jpg); } |
このように指定すると、指定した画像が何回も繰り返されて
背景が敷き詰められているかと思います。
background-repeat
次にbackground-repeatは、背景画像のリピートを指定することができるプロパティになります。
先ほどはこちら何も指定していなかったので、同じ画像が敷き詰められていましたが、
1個だけ出したい時は「no-repeat」を指定すればOKです。
|
1 2 3 4 |
body { background-image: url(meramera.jpg); background-repeat: no-repeat; } |
こうすると、背景画像が一回だけ繰り返されるようになります。
background-position
次にbackground-positionは、背景画像のポジションを指定することができるプロパティになります。
left, center, rightや、
top, center, bottom といった位置を表すキーワードで指定するか、
％や数値でも指定することが可能です。
|
1 2 3 4 5 |
body { background-image: url(meramera.jpg); background-repeat: no-repeat; background-position: right top; } |
こう指定すると、背景画像が右上に表示されます。
background-attachment
次にbackground-attachmentは、背景画像の固定・移動を指定できるプロパティになります。
デフォルトは「scroll」になっていて、
画面のスクロールに伴って、背景画像も移動します。
|
1 2 3 4 5 6 |
body { background-image: url(meramera.jpg); background-repeat: no-repeat; background-position: right top; background-attachment: fixed; } |
このように「fixed」と指定すると、
背景画像の位置が固定され、スクロールしても動かなくなります。
background
上記のプロパティをまとめて、backgroundで1行で書く事もできます。
|
1 2 3 |
body { background: url(meramera.jpg) no-repeat right top fixed; } |
こちらはbackground-attachmentで書かれているソースと同じ表示になります。
今回は「背景」のスタイルについてやっていきました。
次回は「配置」についてです。
ではまた次回！
