I want to change the background-size depending on the device I use.

What do you want to do
The background-size doesn't look good in the app I'm making. So I want to do something like "contain for pc, cover for other things".

Example Code
pages.scss

.top-main{
  padding —200px0200px;
  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;

I'm writing like this now, but I wish I could somehow change this "background-size:contain;background-repeat:no-repeat;" to cover depending on the size.

Additions
pages.scss (scss on the top page)

@media(max-width:575.98px){
  .top-main{
    background-image:url('zero-home.jpg');
    background-size:cover;
  }
  .device{
    background-image:url('zero-home.jpg');
    background-size:cover;
  }
}

@media(min-width:560px){
  .top-main{
    background-image:url('zero-home.jpg');
    background-size:contain;
  }
  .device{
    background-image:url('zero-home.jpg');
    background-size:contain;
  }
}

ruby-on-rails ruby bootstrap scss

2022-09-30 22:04

1 Answers

It is common to use media queries to switch by the width of the browser's viewport.

For example, to specify for smartphones, add the following

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

2022-09-30 22:04

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656