Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
13
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

background とbackground-colorの違い

backgroundは省力形でまとめて書ける:grin:

背景指定の省略形です。
省略したbackgroundしか使わないようにすれば、短く表記できます。

.hitokage{
background: #000 url(image/hitkage.gif) repeat-x fixed right bottom;  
}

上の例は「background-color」「background-image」「background-repeat」「background-attachment」「background-position」って順番に記述しています。

backgoundプロパティー種類

①background-color:
②background-size: ※ここにcoverはよく使う♪
③background-image:url( ) ※カッコ内はクォーテーションはつけない
④background-position:
⑤background-repeat: repeat-〇 ←あまり使わない
※⑥background-attachment←ほとんど使わない

background-positionの使い方、意味

背景画像の位置の初期値を指定します。
何も指定しなければ左上端(top leftまたは0 0)の状態です。

top・right・bottom・left・center で指定。
※組み合わせての指定も可能。
例)background-position:top right; ←こうすれば、右上に表示される♪

それ以外にもpxやem,%で細かい位置の調整もできる。
例)background-position: 50px 100px; ←topから50px leftから100pxの状態です。

ちなみに、ドットインストールの動画では、

background-size:cover
background-position: 50% 50%; ※垂直方向 水平方向 の順で使用していました♪

最後に、

知らなかったbackground-repeatの使い方を書いておきます。
※使うことはほとんどないように思います:joy:

名前の通り、背景画像の繰り返し方法を指定します。
何も指定しなければ縦横方向に繰り返される repeat がかかっている状態です。

background-repeat: repeat-x;   
background-repeat: repeat-y; 
background-repeat: no-repeat;   

repeat-xは横方向だけに・repeat-yは縦方向だけに指定された背景画像を繰り返します。
no-repeatは背景画像を繰り返さないです。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
13
Help us understand the problem. What are the problem?