Lo que ocurre es que tengo una página donde quiero que cuando se abra la página solo se vea una imagen y el menú, lo que pasa es que lo hago es colocandole las medidas de mi monitor, pero como es obvio no todos los monitores son iguales, como podria hacer para que dicha imagen abarque todo en todos los monitores de la misma forma sin tener que aplicarle por pixeles predeterminados?
Ejemplo de como la quiero:
Como se muestra en la imagen, lo que quiero es que cuando se abra la página solo se vea eso y cuando se baje ya este el siguiente contenido.
Acá el código que tengo:
@import url('https://fonts.googleapis.com/css?family=Khand');
@import url('https://fonts.googleapis.com/css?family=Jura');
body {
margin: 0px;
padding: 0px;
}
nav {
background: none;
}
header {
width: auto;
height: 60px;
background: transparent;
position: relative;
}
header ul {
display: inline-flex;
list-style: none;
float: right;
}
header ul li a {
display: block;
margin: 10px 0px;
color: #000;
text-decoration: none;
font-family: 'Jura', sans-serif;
margin-right: 50px;
}
#subcategory {
color: white;
}
#logo {
position: absolute;
margin-top: 15px;
margin-left: 50px;
font-family: 'Khand', sans-serif;
letter-spacing: 3px;
font-size: 26px;
}
/* Esta es la subcategoria */
header ul ul {
position: absolute;
margin-top: 15px;
display: block;
/* Esto hace que los ul hijos (las sub catecorias) se pongan debajo del padre (el menu principal) */
background: #555;
transform: translateX(60%);
opacity: 0;
transition: 0.7s;
font-family: 'Jura', sans-serif;
}
header ul li:hover ul {
/* Cuando se pase el mouse, el Ul de la subcategoria pase de tener opacidad 0 a 1 */
opacity: 1;
transform: translateX(0%);
}
header ul li:hover #icon {
opacity: 0;
}
/* Fin de la subcategoria */
.contenido {
background: url();
}
<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
<div class="contenido">
<header>
<h1 id="logo">VALUKA</h1>
<ul>
<li><a href="" title=""><b>Inicio</b></a></li>
<li><a href="" title=""><b>About us</b></a></li>
<li><a href="" title=""><b>Our Services</b> <i class="fas fa-angle-down" id="icon"></i></a>
<!-- SubCategory -->
<ul>
<li><a href="" id="subcategory">Lorem1</a></li>
<li><a href="" id="subcategory">Lorem2</a></li>
<li><a href="" id="subcategory">Lorem3</a></li>
</ul>
<!-- End -->
</li>
<li><a href="" title=""><b>Contact Us</b></a></li>
</ul>
</header>
<!--Content E IMAGEN PRINCIAL-->
<img src="img/dog.jpg" style="height: 844px;width: 100%;">
</div>