CODEWITHSUNDEEP
htmlcssbackgroundheight
Desii
Desii

Reputation: 25

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.sstatic.net/peive.png

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.

Upvotes: 2

Views: 4531

Answers (1)

VXp
VXp

Reputation: 12058

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

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>

Upvotes: 3

Related Questions