1

I am trying to set background image which will take full image in every ratio of screen resolution. My code is works for specific screen resolution. If I reduce browser resolution smaller then 100% background image become cropped accordingly. But I don't want this. Here is my code. Thanks in advance

.background1 {
    background: url('/images/home/background_img.png'),linear-gradient(270deg, rgba(4, 202, 160, 
  1) 0%, rgba(141, 198, 63, 1) 100%);
    margin-top: -60px;
    background-repeat:no-repeat;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:100% 100%;
    background-position:center;

}
Mithun
  • 255
  • 1
  • 7
  • 17

1 Answers1

0

Set either the height to a viewport width unit (vw) or use the padding hack to enforce an aspect ratio. See this related question.

roye7777777
  • 394
  • 1
  • 2
  • 13
  • This is an example I made using the example mentioned. Is this what you try to achieve? https://codepen.io/roye7777777/pen/yLYQwdz – roye7777777 May 19 '20 at 10:08