Solution 1 :

You need to change height value to :

.bg {



Problem :

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]:



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

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


.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.


Comment posted by waqas Mumtaz

Hi, Can you add you basic code please?