Div taking up half the height and width of the body

Question

I need to make a site that looks like this one: https://drive.google.com/file/d/1bvV7UFjC_lg6QdNeTK7Er_chQqwfPmny/view?usp=sharing Right now it sort of looks like that one, but the first div (the one with the background image) doesn´t take up half the height and width of the viewport. Any ideas on how I could fix it?

Screenshot:

HTML:

<div id="main-menu">
        <p id="invitation_title">
          Escapate a
          </p>
        <p id="city_title">Nueva York</p>
        <Menu />
        <FlightSelector />

      </div>

CSS

#main-menu{
  text-align:center;
  background-image: url('http://hdwpro.com/wp-content/uploads/2018/02/new-york-background-image.jpg');
  background-position: center; 
  background-repeat: no-repeat;
  background-size: cover;
  width:100%;
  height:100%;
}

I set both width and height at 100%, but right now it isn´t even taking up the whole body. — , Feb 16 '19 at 01:06
Your question is a bit ambiguous. Do you want it to take up half the viewport height or entire viewport? — Onome Sotu, Feb 16 '19 at 01:06
100% of what. Maybe your `main-menu` is in another `div` with that height. Show your complete html — Sofyan Thayf, Feb 16 '19 at 01:08
Ideally, I will add a chart that will take half the screen while this div takes the other half. But right now, for some reason, it´s taking less than a third. — , Feb 16 '19 at 01:08

score 0 · Answer 1 · edited Feb 16 '19 at 04:06

0

If you want the background image to take the entire page, you can set the height in terms of viewport like so:

#main-menu {
    height: 100vh;
}

Here’s a link that explains more about viewports:

https://tutorialzine.com/2015/05/simplify-your-stylesheets-with-the-magical-css-viewport-units

edited Feb 16 '19 at 04:06

Tim Kruger

863
2
10
26

answered Feb 16 '19 at 01:15

Onome Sotu

666
9
18

Doing this, but still no dice: body{ font-family: Verdana, Geneva, Tahoma, sans-serif; color: #ffffff; width:100%; height:100%; } #main-menu{ text-align:center; background-image: url('http://hdwpro.com/wp-content/uploads/2018/02/new-york-background-image.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover; width:100%; height:100%; overflow: auto; } – Feb 16 '19 at 01:24

Div taking up half the height and width of the body

1 Answers1