- 締切済み
Backgrounds3
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/2414)
- CSS
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- Katsu_Kaiz
- ベストアンサー率58% (345/586)
親要素という書き方は、厳密にいうと不適切だったかもしれません。申し訳ないです。 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」と三種類の値を入れてみてください。先ほどの長方形全体のなかで、背景画像の大きさがいろいろと変わります。
- Katsu_Kaiz
- ベストアンサー率58% (345/586)
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です。設定を上書きするのではなく、どちらかといえば追記するようなかたちになります。
補足
＞background-size: cover;というのは、背景画像の大きさを親要素にあわせて調整するときに使います 念のためにお尋ねしますが、親要素に合わせるというのは下記のようなことですか。 https://gyazo.com/dba6ac735bf7672bde7ca85f736b87a6
関連するQ&A
- IEでのbackground-size使用について
IEでbackground-sizeが使えづに困っています。 Firefoxやクロームでは問題なく動作しているのですが IEのみ動作しません。 私の使い方が間違っているのでしょうか。 教えてください body { background: url(./images/wave.gif) no-repeat center center fixed #000; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; -webkit-font-smoothing: antialiased; position:fixed; margin:0; padding:0; border:0; }
- ベストアンサー
- CSS
- スマホブラウザでの背景固定
以下のＣＳＳで背景画像を固定しようと思っています。 ＰＣでは問題なく固定されるのですが、スマホだと 背景画像が固定されず、画面をスクロールすると一緒にくっついてきます。 スマホの場合は別の対処が必要なのでしょうか？ body { margin:0 auto; text-align:center; padding:0; background: url(../images/photo01.jpg); background-repeat:no-repeat; background-position:center bottom; background-attachment:fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
- ベストアンサー
- CSS
- Background2
https://gyazo.com/59efd094c98cb3f71816c45fa0a66073 上の画像から background-repeat: no-repeat; というコードですが、最初に画像のコードであれば、このコードはいらないのではないでしょうか
- ベストアンサー
- CSS
- 画像の貼り付けについて。
普通に画面上部に貼り付けることはできるのですが、リピートして貼り付けることができません。 <STYLE type="text/css"> <!-- body{ background-attachment:fixed; background-color:#000000; background-image:url(0266.jpg); background-position:top center; background-repeat:repeat-x;} --> </STYLE> ↑これはどこか違っているのでしょうか？
- ベストアンサー
- レンタルサーバ・ASP
- スタイルシートで・・・
スタイルシートを使った掲示板の背景を固定させたいと思います。 「background-repeat: repeat-y; background-position: center・・・」 上記がその掲示板の背景の変更欄なんですが、repeatじゃなくfixedと入れてみましたが固定されません。 どうしたら背景が固定されますか？ わかる方お願いします！
- ベストアンサー
- HTML
- 注釈パネルレビューから電子メールレビュ-用に送信
下記状態からどのようにすれば、注釈パネルレビューから電子メールレビュ-用に送信 できるのでしょうか https://gyazo.com/2c2c6d3f6d83d008b46d4c7467405cda 次の画像はどうも上のものとバージョンが違うみたいです。 https://gyazo.com/101b67f1ed2a4859f2638ffc89ba877f
- 締切済み
- その他Adobe製品
- AviUtl ダイアログボックス
下記の状態からダイアログボックスを出現させるにはどのような操作手順ですればいいのでしょうか。 https://gyazo.com/8f5d8f98df3c8aa7e823b321b2ba7ea6
- ベストアンサー
- 画像・動画・音楽編集
- GoogleHangout メイン画面
スクリーンショットごとに説明させてください。 (1)Contactの詳細 https://gyazo.com/64bb89328ba54f4cab91099a91cec8a7 メンバーはどこからきたのか メンバーをリストから削除するには (2)Conversationsの詳細 https://gyazo.com/f32041fa11c66f170b3010d01b43915b メンバーはどこからきたのか メンバーをリストから削除するには (3)PhoneCallsの詳細 https://gyazo.com/b8b7bcd49260b546976981363157df47 画面は以前電話した固定電話ですが、通話したけどリストには GmailAccountの人へ音声通話したことがあればこのリストにのるのか
- 締切済み
- Googleサービス全般
補足
わかりました。私の考えが合っていて、ほっとしました。 この段階では background－スタイルシートリファレンス background-size－CSS3リファレンス の違いを厳密に理解しなくていいですね。時期尚早の感じがします。