tanka Posts - Answer Overflow

tanka

•Created by tanka on 6/18/2024 in #front-end

how do you go about creating the main background image to take full screen

I mean I know about vh and vw so that the div takes up fullscreen, but a side-effect of that is when you have header, the image starts to extent the vh and starts going below the bottom of the screen theres one way that I found on chat gpt, which I guess would work, but is there a better way to go about this? Main intent is to create a slider background image main page that is responsive and bg img maintains the aspect ratio, for which I'd use the background-size: cover; but I just want to know about the correct way to tackle the height part or maybe the industry standard.

.full-screen {
    background-color: #f0f0f0;
    height: calc(100vh - 60px); /* Adjust 60px based on the actual height of your header */
    width: 100vw;
    padding-top: 60px; /* Adjust 60px based on the actual height of your header */
    display: flex;
    align-items: center;
    justify-content: center;
}

.full-screen {
    background-color: #f0f0f0;
    height: calc(100vh - 60px); /* Adjust 60px based on the actual height of your header */
    width: 100vw;
    padding-top: 60px; /* Adjust 60px based on the actual height of your header */
    display: flex;
    align-items: center;
    justify-content: center;
}

7 replies

Gaming

Programming