You need to change height value to :

.bg {

height:100vh;

}

In the following picture, we have to apply height 100% to both html and body tags. But how to do that in a next.js component??

Refer [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;
}

after applying height:100vh; i just show the empty div with length not the image.