やりたいこと
作っているアプリ内で,background-sizeがいまいちいい感じに決まりません.そこで,”pcならcontain, それ以外ならcover”みたいなことをやりたいです.
コード例
pages.scss
.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;
こんな感じで今は書いているのですが,この ”background-size: contain; background-repeat: no-repeat;”
をどうにかしてサイズに応じてcoverに変えたり出来たらいいなと思っています.
追記分
pages.scss (トップページのscssです)
@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;
}
}