yto7142022/10/14 07:12

CSSの複数のコードが反映されないです。

3-6 背景色と背景画像を設定する のところで
背景サイズを指定しながら、背景画像の繰り返しと表示位置を制御しようと思っているのですが、複数のコードを入れるとうまく作動しません。

こちらCSSの基本的なところを見ても理解しきれずお聞きした次第です。
よろしくお願いいたします。

<当方の希望しているイメージ>
サイズを調整しながら、背景画像を1枚にする

<当方が入力しているCSSコード>
body{
background-image : url(antonino-visalli-RNiBLy7aHck-unsplash.jpg) ;
background-size : 200px 100px ;
.repeat{
background-repeat : repeat-y ;
}
.position{
background-repeat: no-repeat;
background-position: center center;
}
}

回答

  • shirako2022/10/29 13:20

    通りすがりです><
    解決済みであれば申し訳ないです。

    ```css
    body {
    background-image: url(antonino-visalli-RNiBLy7aHck-unsplash.jpg);
    background-size: 200px 100px;
    .repeat {
    background-repeat: repeat-y;
    }
    .position {
    background-repeat: no-repeat;
    background-position: center center;
    }
    }
    ```

    記載いただいているcssの
    .repeat
    .position
    セレクタに関して、
    bodyセレクタのブロック内({}の内側)に定義されているため、
    コードが反映されていないように見えます。

    ```css
    body {
    background-image: url(antonino-visalli-RNiBLy7aHck-unsplash.jpg);
    background-size: 200px 100px;
    }
    .repeat {
    background-repeat: repeat-y;
    }
    .position {
    background-repeat: no-repeat;
    background-position: center center;
    }
    ```
    上記のようにbodyの{}の外に出したあと、
    HTMLのbodyタグにclassをふってあげるとcssが反映されると思います。

    repeat-yを確認したい場合
    ```html

    背景画像を設定する

    ```
    no-repeatを確認したい場合
    ```html

    背景画像を設定する

    ```

    https://chot.design/html-css-beginner/fef3bfcc3dd6/
    > IDとクラスの指定方法
    クラスとセレクタに関しては上記に記載がありそうです。

    > 3-6 背景色と背景画像を設定する
    この章にはHTMLにclassをつける手順が記載なかったので
    反映されない事象が起きたかもしれません。

  • shirako2022/10/29 13:22

    >上記のようにbodyの{}の外に出したあと、
    >HTMLのbodyタグにclassをふってあげるとcssが反映されると思います。
    こんなです><
    repeat-yを確認したい場合

    no-repeatを確認したい場合

  • shirako2022/10/29 13:23

    htmlの例が消えてます、申し訳ないです。

回答する

新規登録してログインすると質問にコメントがつけられます