締切済み

Backgrounds3

2018/11/26 14:14

Edit https://gyazo.com/bc3cc9030d9324683340ba4882be3380 Correct https://gyazo.com/6892c3f113603145bbe6b3cfca6f789b EditとCorrectともあるのですが、no-repeat center center fixed;とはどういうことですか Correctにあるのですが、 background-size:cover;は前のbackgroundを上書きしているのですか

nada
お礼率57% (1387/2418)

CSS
回答数2
ありがとう数0

みんなの回答 （2）
専門家の回答

みんなの回答

Katsu_Kaiz
ベストアンサー率58% (345/586)

2018/11/28 23:55 回答No.2

親要素という書き方は、厳密にいうと不適切だったかもしれません。申し訳ないです。 html { background: url('img_flower.jpg') no-repeat center center fixed; background-size: cover; } と書いてあるため、この場合は<html></html>で囲まれた部分の背景画像を指定していることになります。おっしゃるとおり、長方形全体のことです。 background-size: auto; background-size: contain; background-size: cover; ためしに、上記のように「auto」「contain」「cover」と三種類の値を入れてみてください。先ほどの長方形全体のなかで、背景画像の大きさがいろいろと変わります。

質問者

補足 2018/11/29 11:42

わかりました。私の考えが合っていて、ほっとしました。この段階では background－スタイルシートリファレンス background-size－CSS3リファレンスの違いを厳密に理解しなくていいですね。時期尚早の感じがします。

ログインすると、全ての回答が全文表示されます。

Katsu_Kaiz
ベストアンサー率58% (345/586)

2018/11/26 22:28 回答No.1

background: no-repeat center center fixed;というのは、 background-repeat: no-repeat; background-position: center center; background-attachment: fixed; をまとめて指定したものです。上から順に、「背景画像の表示を繰り返さない」「背景画像を上下左右の中央に表示」「背景画像の表示位置を固定する」という意味になります。 ◆background－スタイルシートリファレンス　http://www.htmq.com/style/background.shtml また、background-size: cover;というのは、背景画像の大きさを親要素にあわせて調整するときに使います。 ◆background-size－CSS3リファレンス　http://www.htmq.com/css3/background-size.shtml backgroundは背景画像全体の指定、background-sizeは背景画像の大きさを調整するものなので、そもそもがまったく異なるCSSです。設定を上書きするのではなく、どちらかといえば追記するようなかたちになります。

質問者