CSS背景 - ページや要素の背景の一括設定 | background

2013/11/29 00:19更新
TAGS: | CSS|背景

本文は背景関連のCSS属性 background(背景色、背景画像、そして背景画像の並べ方、表示方式、表示位置の一括指定する方法) について学びたいと思います。

背景関連のはCSS属性:
background-color
background-image
background-repeat
background-attachment
background-position
background

以上の今まで紹介してきたbackground-colorやbackground-imageなどの背景関連のCSS属性を用いて、ページや要素の背景色、背景画像などの表示スタイルを設定することができました。
backgroundプロパティは、これらの背景関連の属性を一括指定するができます。

background属性



background構文:
background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position]

backgroundの値は、半角スペースで区切って指定します。各属性の値を省略可能で、決まった順番もありません。
例から申しますと、次の例:
background-color: #FFCC66;
background-image: url("somepic.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;


backgroundを用いた記述は:
background: #FFCC66 url("somepic.gif") no-repeat fixed right bottom;



body {
    background: #FFCC66 url("somepic.gif") no-repeat fixed right bottom;
}

div {
    background: #FFCC66 url("somepic.gif") no-repeat fixed right bottom;
}

著者について
Syboos.jp編集長AJavaやオープンソース情報の執筆、Webサイトの開発や運営全般の業務に携わる。

Sponsored Link


コメント

記事への評価

USER LOGIN FIRST
メールアドレス:
パスワード: