CODEWITHSUNDEEP
htmlcss
H4RRY
H4RRY

Reputation: 21

How can I add 2 separate backgrounds in html?

I want to make a website where when it loads, there is a full screen image, and when you scroll down it has a white background which includes all of my about and contact information. How can I do it? I made a div called "top-background" which includes the source to the image, and in the css i used 

z-index: -100;
height: 30%;
width: 100%;
top: 0%;

But it doesn't fullscreen or do what i want it to do.

Upvotes: 0

Views: 128

Answers (2)

Corné
Corné

Reputation: 1413

You can achieve this by creating two div's and making their height 100vh which stands for 100% of view height.

.background-1 {
  background: blue;
  height: 100vh;
}

.background-2 {
  background: white;
  height: 100vh;
}
<div class="background-1"></div>
<div class="background-2"></div>

Upvotes: 2

Alex
Alex

Reputation: 878

You can do it like below

body {
  margin: 0;
}

.bgone {
    position:absolute;
    width: 100%; 
    height: 100%; 
    background: blue;
    background-image: url('yourimagehere.png');
    background-size: cover;
    color: white;
}

.bgtwo {
  position: absolute;
  width: 100%;
  top: 100%;
  height: 100px;
}
<div class='bgone'>On page load content</div>
<div class='bgtwo'>Scrolled content</div>

Upvotes: 2

Related Questions