

**やりたいこと**  
作っているアプリ内で，background-sizeがいまいちいい感じに決まりません．そこで，”pcならcontain,
それ以外ならcover”みたいなことをやりたいです．

**コード例**  
**pages.scss**

[code]

      .top-main {
      padding: 200px 0 200px;
      text-align: center;
      position: absolute;
      top: 0;
      width: 100%;
      height: auto;
      min-height: 100%;
      /*background-image: image-url('app/assets/images/canva.jpg'); */
      background-image: url('zero-home.jpg');
      background-size: contain;
      background-repeat: no-repeat;
    
[/code]

こんな感じで今は書いているのですが，この `”background-size: contain; background-repeat: no-
repeat;”` をどうにかしてサイズに応じてcoverに変えたり出来たらいいなと思っています．

**追記分**  
**pages.scss** （トップページのscssです）

[code]

    @media (max-width: 575.98px) {
      .top-main {
        background-image: url('zero-home.jpg');
        background-size: cover;
      }
      .devise {
        background-image: url('zero-home.jpg');
        background-size: cover;
      }
    }
    
    @media (min-width: 560px) {
      .top-main {
        background-image: url('zero-home.jpg');
        background-size: contain;
      }
      .devise {
        background-image: url('zero-home.jpg');
        background-size: contain;
      }
    }
    
[/code]


CC BY-SA 4.0
2022-07-03T14:37:18.647
89742
2022-07-07T14:23:15.767
2022-07-07T14:23:15.767
40091
40091
question
ruby-on-rails ruby bootstrap scss
使っているデバイスによってbackground-sizeを変えたい


メディアクエリを使ってブラウザーのビューポートの幅で切り替えるのが一般的です。

たとえばスマートフォン用の指定は下記を追加します

[code]

    @media (max-width: 575.98px) {
      .top-main {
        background-size: cover;
      }
    }
    
[/code]


CC BY-SA 4.0
2022-07-03T15:44:56.793
89744
2022-07-03T15:44:56.793
292
89742
answer