2

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:

introducir la descripción de la imagen aquí

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>

2 respuestas 2

2

Te he añadido un style en la cabecera, donde muestra desde el css una imágen, le he dado un alto predeterminado y una anchura para que siempre sea 100% desde el dispositivo desde el que se vea:

No se si es esto lo que quieres lograr:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Psd to Html</title>
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">

</head>

<style>

#dogbg{background-image:url(img/dog.jpg);background-size: cover; width: 100%; height:700px;box-shadow:0 18px 18px 0 rgba(0,0,0,.2)}

</style>
<body>
<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>

    <div id="dogbg"></div>

</div>

    <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo distinctio ducimus repellat cumque a, veniam nulla molestiae repellendus accusamus doloribus hic rem inventore aut doloremque aperiam in necessitatibus, labore dolor alias ipsam nisi fugiat vitae cum. Obcaecati numquam velit officiis temporibus, possimus perferendis dignissimos repellat, provident accusamus quis, quisquam soluta ab porro ut error ducimus quos suscipit rerum praesentium placeat.</h2>

</body>
</html>

Prueba este código en tu index.html y me cuentas

0

Lo que deberías hacer es utilizar las dimensiones del viewport (pantalla del dispositivo en el que se abre la página). Lo escribes en porcentaje pero reemplazas el '%' por vh (view height) y vw (view width). Además usaría 'position: fixed' en el header para que se mantenga en la parte superior cuando bajes por la página y se más fácil acceder al menú.

<img src="img/dog.jpg" style="height: 100vh; width: 100vw;">

Recuerda que puede ser mejor utilizar una página de estilos aparte, para destinar el HTML sólo a estructurar tu página y evitar confusiones ;)

Espero te resulte. Saludos!

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.