Making div background same height as body

i have been trying to solve this for like 2 hours now.. tried multiple guides, nothing worked.

Here is my css:

body
margin:0;
background:url('chalk.jpeg');


html, body
height: 100%;


.welcome
text-align: center;
position:relative;
height:100%;
background:rgba(38, 36, 15, 0.7);



However, for some reason, the page looks like this: https://i.imgur.com/iPvMTk1.jpg

I want the welcome div background to be on top of the body background image until the end of the page. Tried many solutions but nothing would work.

1 Answer
1

You can do it with viewport units where the body element takes 100% of the viewport height with the height: 100vh, then just stretch the .welcome div with height: 100%:

body

100%

height: 100vh

.welcome

height: 100%

html, body
width: 100%;
height: 100vh; /* 100% of the viewport height */
margin: 0;


body
background: url('http://placehold.it/1600x900') no-repeat center center; /* modified */
background-size: cover; /* recommended / also try the "contain" */


.welcome
text-align: center;
position: relative;
height: 100%;
background: rgba(38, 36, 15, 0.7);


<div class="welcome">welcome div</div>

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy