Как исправить фон в соответствии с веб-страницей в css?

Question

Я установил фон радиуса с фиксированной шириной и высотой, но когда я уменьшаю масштаб в это время, он отражает только контент, а не фон. Как я могу это исправить?

Это моя текущая страница: -

When i zoom out web page background remaining same it doesn't change

Here is my css code:-

.main {
    overflow: hidden;
}

.bg {
    width:100%;
    height:40vw;
    border-bottom-left-radius: 80%;
    border-bottom-right-radius: 80%;
    background-color:  #f0f5f5; 
 }

Here is my html code :-

  Присоединяйтесь к Pragra!  Lorem Ipsum - это просто фиктивный текст в полиграфической и наборной индустрии. Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов, когда неизвестный типограф взял камбуз шрифта и скремблировал его, чтобы сделать книгу образцов шрифта.  Свяжитесь с нами!   

Answer 1

Причина в том, что вы устанавливаете высоту 40vh (высота окна просмотра), поэтому независимо от того, увеличиваете ли вы его или расширяете, у него все равно 40vh (40% высоты окна вашего браузера). Итак, решение очень простое: просто установите фиксированное значение, например:

.bg {
    height: 500px;
}