В Next. js, как создать изображение bg, которое покрывает все окно браузера

Question

На следующем рисунке мы должны применить высоту 100% к тегам html и body. Но как это сделать в компоненте next.js ??

См. [1]: https://i.stack.imgur.com/K1r9l.png

[2] https://www.w3schools.com/howto/howto_css_full_page.asp

"mainImage.jsx"

import React from 'react';
import './mainImage.css'

export default ()=>(
    <div>
        <div className="bg"></div>
    </div>
)

"mainImage. css"

.bg {
    /* The image used */
    background-image: url("/public/jeep3.jpg");

    /* Full height */
    height: 100vh;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

после применения высоты: 100vh; я просто показываю пустой div с длиной, а не изображение.

Answer 1

Вам необходимо изменить значение высоты на:

.bg {

height:100vh;

}