background-imageで背景の指定をする

今回はbackground-imageを使って背景の指定をしました。

background-image

以下、今回の記述です。

body {

　font-family: "メイリオ","Hiragino kaku Gothic Pro",sans-serif;

　background-color: #edede3;

　margin: 0;

　background-image: url(back.png);

}

background-imageというセレクタにurl(back.png)という値を記述しています。ここで疑問に思ったのが、直接back.pngと記述したらあかんの？ってことです。

url(back.png)と記述しなければ、正しく表示されないんです。今までと少しルールが異なるので、CSSで画像を表示するときは、url()を忘れずつける必要があります。

まとめ

今回は簡単な記述で大きくサイトが変更できるので、使っていて楽しい記述です。ただ、画像ファイルを同一のディレクトリ内に入れておく必要があるので、背景画像を変更したいときは、同じフォルダ内に入れておくことを忘れないでおきましょう。

今回のBefore Afterです。

Before

After

背景部分に横縞が入ったのがわかると思います。こんな感じで好きなように背景を指定できます。

小さな画像をrepeatで表示されているだけなので、

background-image: url(back.png)

background-repeat: no-repeat

と記述すると、画像が単体で表示されます。

background-repeat: repeat-xと書くと横方向に

background-repeat: repeat-yと書くと縦方向に

リピートが効くようになります。

この調子で引き続き勉強していきます。