授業12回目 CSS⑷ 2018.1.15(mon)
2018年 01月 16日
◼︎backgroundプロパティについて
background-color:キーワード
要素の背景色を指定する
キーワード:transparent/#rrggbb/#rgb/カラーネーム/rgb(r,g,b)/rgb(r%,g%,b%)/rgba(r,g,b,a)
background-image : url(画像ファイルへのパス)
要素の背景画像を指定する
キーワード:none/画像ファイルのURL
background-repeat : キーワード
背景画像の繰り返しパターンを指定する
キーワード:repeat/repeat-x/repeat-y/no-repeat
background-attachment : キーワード
背景画像のスクロールを指定する
キーワード:fixed/scroll
background-position : 左右方向、上下方向の順に半角スペースで区切る
背景画像の表示位置(表示開始位置)を指定する
キーワード:left/right/center/top/bottom
数値・単位:px/%/em/vwなど
*デフォルトでは左上を基準にして画像が配置される。
*値を横位置、縦位置の順に半角スペースで区切って記述する。
background
背景に関する指定をまとめて行う
*指定順序は問われない。
ex.
body {
background-color : #ff0000 ;
background-image : url(img/pink.png) ;
background-repeat : no-repeat ;
background-attachment : fixed ;
background-position : right bottom ;
}
body {
background : #ff0000 url(img/pink.png) no-repeat fixed right bottom ;
}
♣︎参考にした本・サイト♣︎
CSS Lecture
CSS backgroundプロパティについてのまとめ
http://www.css-lecture.com/log/css-beginner/041.htmlHTMLクイックリファレンス
background
background-position
『HTML&CSSとWebデザインが1冊できちんと身につく本』服部雄樹(著) 技術評論社
#
by zooori
| 2018-01-16 22:53
| 授業まとめ(CSS編)