I'm making my first steps learning to code. I've been taking some courses on Internet and now I decided to continue learning while I build a Wordpress child theme.
The thing is that I have two divs, I want that my first div (an image) takes the 100% of the height of my window. Then if I scroll down I can see the second div (body text).
In fact, it's the same effect that uses the MOMA site http://www.moma.org/calendar/exhibitions/1614
Navigating through S.O I found a question really similar to this one ith a similar objective: How can I make a div 100% of window height?
From here I started to make my own version but even using a height: 100% it doesn't work:
.image {
min-width: 50%;
min-height: 100%;
height:100%;
margin: 0 auto;
left:0;
right:0;
z-index: 100;
padding:40px;
}
.text {
font-size: 20px;
font-weight: 400;
font-family: roboto;
text-align: left;
margin: 40px;
margin-left: 20px;
line-height: normal;
display: block;
}<div id="image">
<img src="https://www.discovernorthernireland.com/image.aspx?ImageID=59529&Width=600&Height=400&Bg=">
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius sapiente voluptatem deleniti sunt quos earum distinctio ea eaque dolore velit optio aliquid nihil quia qui dignissimos tempora dolorem. Voluptates voluptate.</p>
</div>I can't make my image stay vertically and horizontally centered in the browser. Alone without the text immediately after.
Do you have some suggestion? Thank you for your help.
