0

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.

Praveen Kumar Purushothaman
  • 164,888
  • 24
  • 203
  • 252
H4RRY
  • 21
  • 1
  • 1
  • 1
  • Something like this? https://www.rahicodes.tk/ – Tan-007 May 13 '19 at 08:46
  • Yeah like that. – H4RRY May 13 '19 at 08:52
  • You could use `vh` & `vw` units to defined to always make it till the entire screen for all users. Read up on units here - https://www.w3schools.com/cssref/css_units.asp – Marc Hjorth May 13 '19 at 08:54
  • Possible duplicate of [How to make a div 100% height of the browser window?](https://stackoverflow.com/questions/1575141/how-to-make-a-div-100-height-of-the-browser-window) – leonheess May 13 '19 at 08:58

2 Answers2

2

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>
Alex
  • 878
  • 1
  • 10
  • 25
2

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>
Mobarak Ali
  • 751
  • 5
  • 19
Corné
  • 1,304
  • 3
  • 13
  • 32