Kevin Powell - Community•6mo ago

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

2 Replies

MarkBoots•6mo ago

you'd probably want an element per background. that way you can control the size and the cover better maybe something like this https://codepen.io/MarkBoots/pen/ZENrYNL

tankaOP•6mo ago

Yess, this is helpful, But this way, the sliding image remains as the background throughout the height of the website. I might use this at someplace else im sure. The the problem that I was having was Adjustting the height of a div inside the body Like the main page whose height is full screen and when I scroll down, I m able to navigate the websie like wait.. https://www.amd.com/ like this, but only with Advancing Enterprise AI part not sticking out the whole vh and vh gets taken up by the sliding image but even with the Header down, The image dosen't go down the frame just like Advancing Enterprise AI part is sticking Up, similarly Slider dosent stick down when I scroll So my question was, I understand subtracting the height of the header from the vh 100 so that its a fit, but is there a better way to go about this? Or a standard way that developers usually go about tackling this problem?

Gaming

Programming

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