Help us understand the problem. What is going on with this article?

backgroundの詳細設定とショートハンドの使用

app.css
background {
background: url(/assets/img/picture/xxx.jpg) no-repeat center/cover;
}

一行のスタイルシートで記述

上記はすべて「background」の指定のため、ショートハンド(複数指定)を使って短く記述できます。
ショートハンドでは/coverとすることで background-size: cover を指定することができます。

background-repeat 背景画像を繰り返して表示する

指定 説明
repeat 全面にリピートして表示します。デフォルトはこの状態です。
repeat-x X方向、つまり横方向にリピートして表示します。
repeat-y Y方向、つまり縦方向にリピートして表示します。
no-repeat 名前の通り、リピートはしません。

background-size 背景画像のサイズを調整する

画像が大きすぎて要素からはみ出してしまう時

指定 説明
auto 自動算出します。基本は元画像の大きさそのままです。
contain 元画像の縦横比は保持して、要素に元画像が全て収まるように調整してくれます。
cover 元画像の縦横比は保持して、要素をちょうどよく覆うサイズにしてくれます。
数値(px) 明示的にpxで大きさを調整します。
数値(%) 要素に対しての割合で指定します。

背景画像の位置を調整することができるプロパティ

指定 説明
キーワードで指定 center、left、right、top、bottomという風に、位置を言葉で指定します。
数値(%) 要素の左上からの位置を、要素を基準にしたパーセンテージで指定します。
数値(px) 要素の左上からの位置を、明示的にpxで指定します。

background-size

auto 基本そのままの大きさ
cover 要素を埋める
: contain 背景画像全体が見える

annaaida
フロントエンジニア
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした