What happens is that I have a page where I want that when the page is opened I only see an image and the menu, what happens is that I do it by placing the measurements of my monitor, but obviously not all Monitors are the same, how could I do so that this image covers everything on all monitors in the same way without having to apply it by default pixels?
Example of how I want it:
As shown in the image, what I want is that when the page is opened, only that is seen and when it is downloaded, the following content is already there.
Here's the code I have:
@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>