css background

HTML&CSS

background

backgroundは以下のプロパティの一括指定です

background-attachment
background-clip
background-color
background-origin
background-position
background-repeat
background-size
background-image

各々のプロパティを見ていきます

background-attachment

background-attachment: scroll;

     背景は固定され、内容はスクロールする

background-attachment: local;

     背景は内容とともにスクロールする

background-attachment: fixed;

     要素とは関係なくビューポートの相対値で固定

     要素及び内容の動きと関係なく固定される

初期値:scroll

background-clip

background-clip: border-box;

     背景はborderまで

background-clip: padding-box;

     背景はpaddingまで

background-clip: content-box;

     背景はcontentまで

background-clip: text;

     背景はテキスト内に表示される

初期値:border-box

background-color

background-color: red;

     red,blue,Yellow等のキーワードで指定

background-color: #ffffff;

     16進数で指定

background-color: #fff;

     16進数短縮形(16進数で色の3桁がともに同じ英数字が並ぶ場合に省略できる)

background-color: #ffffff00;

     16進数の透過

background-color: #fff0;

     16進数の透過短縮形

background-color: #ffffffff;

     16進数の不透過

background-color: #ffff;

     16進数の不透過短縮形

background-color: rgb(255, 255, 128);

     RGBで指定

background-color: rgba(117, 190, 218, 0.5);  

     RGBで指定50%透過

background-color: currentcolor;

     現在colorに設定されている色で指定

background-color: transparent;

     背景色を無効にする

初期値:transparent

background-origin

background-origin: border-box;

     背景は境界から相対値になる

background-origin: padding-box;

     背景はpaddingボックスから相対値になる

background-origin: content-box;

     背景はcontentボックスから相対値になる

初期値:padding-box

background-position

positionの各値はbackground-originで指定した位置から相対

background-position: top;

     上辺中央

background-position: bottom;

     下辺中央

background-position: left;

     左辺中央

background-position: right;

     右辺中央

background-position: center;

     中央

background-position: 75% 30%;

     左辺から75%、上辺から30%の位置

background-position: 20px 50px;

     左辺から20px上辺から50pxの位置

background-position: right 10px bottom 10px;

     右辺から10px下辺から10pxの位置

値が1つの数値又はパーセントの場合は、X座標を指定しY座標は50%になる

値が2つの数値又はパーセントの場合は、最初がX座標、2番目がY座標になる

値が3つの場合指定できるのは、2つのキーワードと1つの値又はパーセント

値が4つの場合は1つ目と3つ目がキーワード値で、2つ目と4つ目がそのキーワードからの値又はパーセントです

初期値:0% 0%

background-repeat

指定はキーワード値のみで、値1つの一括指定の場合

background-repeat: repeat-x;

  横方向に繰り返す

background-repeat: repeat-y;

  縦方向に繰り返す

background-repeat: repeat;

  描画領域全体に繰り返す

background-repeat: space;

  画像を繰り返すのはrepeatを同じだが左辺と右辺を起点とし隙間を空白で埋め等間隔で配置される

background-repeat: round;

  画像を切取らず隙間なく繰り返し配置そのために画像サイズを縮小拡大する

background-repeat: no-repeat;

  繰り返し配置をしない

値2つの場合

background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;

以下は同じ結果となります

値1つ指定 値2つ指定

repeat-x    repeat no-repeat
repeat-y    no-repeat repeat
repeat    repeat repeat
space    space space
round    round round
no-repeat    no-repeat no-repeat

初期値:repeat

background-size

background-size: cover;

  画像を描画領域に余白なく配置し余分な部分は切り取られる
  画像は描画領域の縦横の長い方に100%で縮小拡大される

background-size: contain;

  画像は描画領域の縦横の短い方に100%で縮小拡大される
  長い方はrepeatされる

background-size: auto;

  元の画像サイズを維持したまま縦横を繰り返す

background-size: 300px 50%;

  元の画像サイズを横300px縦50%に縮小拡大し繰り返す

初期値:auto auto

background-image

background-image: url(./image/picture.png);

  画像をurlで指定
  また「,」で区切って複数指定することが出来る

background-image:linear-gradient(to bottom, rgba(255, 145, 0, 1), rgba(190, 172, 7, 0.5));

  グラデーション指定

初期値:none

コメント