0

Buenas

Quería hacer una página web vertical para prácticar, y he encontrado esta que estoy siguiendo como referencia: Enlace a pag. web de referencia.

¿Como ha hecho para la imagen de fondo inicial, de sus pies ocupe exactamente el ancho y alto de la pantalla?

Yo lo intento pero no me sale. He hecho esto:

.Portada {
  height: 700px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  text-align: center;
  position: relative;
}

#Fondo-Portada {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -100;
}

#Logo {
  height: 90px;
  width: 90px;
  margin-top: 50px;
  margin-bottom: 50px;
  z-index: 10;
}

.mierda {
  height: 200px;
  width: 100%;
  background-color: aqua;
}

#Frase-Presentacion {
  font-size: 40px;
  font-weight: bold;
  color: #FFF;
}

#Btn-Ready {
  height: auto;
  width: 300px;
  font-size: 18px;
  background-color: transparent;
  color: #FFF;
  line-height: 26px;
  border-radius: 28px;
  border-color: #b00000;
  cursor: pointer;
  transition: width 0.2s;
}

#Btn-Ready:hover {
  width: 320px;
  background-color: #b00000;
}

#Aprende-Mas {
  color: #FFF;
  font-size: 18px;
  opacity: 0.6;
  position: absolute;
  bottom: 0px;
}

.icon-keyboard_arrow_down {
  color: #FFF;
  font-size: 28px;
  opacity: 0.6;
}
<div class="Portada">
  <img id="Fondo-Portada" src="Img/Fondo-Pies.jpg" alt="">

  <img id="Logo" src="Img/logo70px.png" alt="Logo">

  <p id="Frase-Presentacion"> Hola, soy Carlos. Y diseño y construyo </p>

  <input type="button" id="Btn-Ready" value="I'm ready">

  <p id="Aprende-Mas">Aprende más de lo que hago</p>
  <span class="icon-keyboard_arrow_down" id="Aprende-Mas"></span>
</div>

Básicamente he hecho un contenedor general, Portada y dentro he ido insertando la imagen de fondo, textos, botones...

¿Cual es la manera de insertar este fondo y sobretodo como se hace para darles la altura y anchura para que ocupe el 100% de la pantalla?

5 respuestas 5

1

Agrega el atributo height: 100vh; a la clase .Portada

.Portada {
  height: 100vh;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  text-align: center;
  position: relative;
}

#Fondo-Portada {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -100;
}

#Logo {
  height: 90px;
  width: 90px;
  margin-top: 50px;
  margin-bottom: 50px;
  z-index: 10;
}

.mierda {
  height: 200px;
  width: 100%;
  background-color: aqua;
}

#Frase-Presentacion {
  font-size: 40px;
  font-weight: bold;
  color: #FFF;
}

#Btn-Ready {
  height: auto;
  width: 300px;
  font-size: 18px;
  background-color: transparent;
  color: #FFF;
  line-height: 26px;
  border-radius: 28px;
  border-color: #b00000;
  cursor: pointer;
  transition: width 0.2s;
}

#Btn-Ready:hover {
  width: 320px;
  background-color: #b00000;
}

#Aprende-Mas {
  color: #FFF;
  font-size: 18px;
  opacity: 0.6;
  position: absolute;
  bottom: 0px;
}

.icon-keyboard_arrow_down {
  color: #FFF;
  font-size: 28px;
  opacity: 0.6;
}
<div class="Portada">
  <img id="Fondo-Portada" src="Img/Fondo-Pies.jpg" alt="">

  <img id="Logo" src="Img/logo70px.png" alt="Logo">

  <p id="Frase-Presentacion"> Hola, soy Carlos. Y diseño y construyo </p>

  <input type="button" id="Btn-Ready" value="I'm ready">

  <p id="Aprende-Mas">Aprende más de lo que hago</p>
  <span class="icon-keyboard_arrow_down" id="Aprende-Mas"></span>
</div>

1
  • @NEA si crees que esta respuesta fue una solución a tu pregunta por favor marca como correcta.
    – zerokira
    el 9 ago. 2018 a las 13:34
0

Podés usar vh y vw que son medidas relativas de acuerdo al viewport. Vh hace referencia a la centésima parte de la altura del viewport y vw a la centésima parte del ancho del viewport.

1vh = 1% de la altura del viewport

100vh = altura del viewport

1vw = 1% del ancho del viewport

100vw = ancho del viewport

Para el ejemplo que planteás:

body {
    margin: 0;
}

.Portada {
  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.3);
  text-align: center;
  position: relative;
}
0

Te dejo este ejemplo por si te sirve, saludos.

body, html {
  height: 100%;
  margin: 0;
  font: 400 15px/1.8 "Lato", sans-serif;
  color: #777;
}

.bgimg-1, .bgimg-2, .bgimg-3 {
  position: relative;
  opacity: 0.65;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}
.bgimg-1 {
  background-image: url("http://p1.pichost.me/i/66/1910819.jpg");
  height: 100%;
}

.caption {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  color: #000;
}

.caption span.border {

  color: #fff;
  padding: 18px;
  font-size: 30px;
  
}

h3 {
  letter-spacing: 5px;
  text-transform: uppercase;
  font: 20px "Lato", sans-serif;
  color: #111;
}
<body>

<div class="bgimg-1">
  <div class="caption">
    <span class="border">AQUI DEJAS ALGO</span><br>
    <span class="border">Y AQUI TAMBIEN PARA LLENAR ALGO</span>
  </div>
</div>

<p style="padding:5px 15px">Este ejemplo crea una imagen de fondo de página completa. Trate de cambiar el tamaño de la ventana del navegador para ver cómo siempre cubrirá la pantalla completa (cuando se desplaza hacia arriba), y que se escala muy bien en todos los tamaños de pantalla.</p>

</body>

0

Lo que debes primero hacer es un reset css para eliminar las reglas como rellenos y márgenes que cada navegador pone por defecto:

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
.Portada {
  height: 700px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  text-align: center;
  position: relative;
}

#Fondo-Portada {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -100;
}

#Logo {
  height: 90px;
  width: 90px;
  margin-top: 50px;
  margin-bottom: 50px;
  z-index: 10;
}

.mierda {
  height: 200px;
  width: 100%;
  background-color: aqua;
}

#Frase-Presentacion {
  font-size: 40px;
  font-weight: bold;
  color: #FFF;
}

#Btn-Ready {
  height: auto;
  width: 300px;
  font-size: 18px;
  background-color: transparent;
  color: #FFF;
  line-height: 26px;
  border-radius: 28px;
  border-color: #b00000;
  cursor: pointer;
  transition: width 0.2s;
}

#Btn-Ready:hover {
  width: 320px;
  background-color: #b00000;
}

#Aprende-Mas {
  color: #FFF;
  font-size: 18px;
  opacity: 0.6;
  position: absolute;
  bottom: 0px;
}

.icon-keyboard_arrow_down {
  color: #FFF;
  font-size: 28px;
  opacity: 0.6;
}
<div class="Portada">
  <img id="Fondo-Portada" src="Img/Fondo-Pies.jpg" alt="">

  <img id="Logo" src="Img/logo70px.png" alt="Logo">

  <p id="Frase-Presentacion"> Hola, soy Carlos. Y diseño y construyo </p>

  <input type="button" id="Btn-Ready" value="I'm ready">

  <p id="Aprende-Mas">Aprende más de lo que hago</p>
  <span class="icon-keyboard_arrow_down" id="Aprende-Mas"></span>
</div>

Finalmente le das al contenedor las dimensiones del viewport:

height: 100vh;
width: 100%;
0

Podrías darle el siguiente valor: background-size: 100vh 100vw. Es bueno siempre usar unidades de medidas relativas. También revisa no haberle dado otro valor al "tamaño" desde otro selector. Te recomiendo usar el archivo normalize.css, que resetea los valores

1
  • 1
    Tu respuesta podría mejorarse con información de apoyo adicional. Por favor, pulsa en editar para añadir más detalles, como citas o documentación, para que otros puedan confirmar que tu respuesta es correcta. Puedes encontrar más información sobre cómo escribir buenas respuestas en el centro de ayuda.
    – Comunidad Bot
    el 18 oct. 2023 a las 14:23

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.