Estoy usando una plantilla Bootstrap con un pie de página fijo en la parte inferior de la página. Tiene una altura de 50 px.

Luego quiero usar una imagen de fondo que comience en la parte superior del monitor y termine exactamente en la parte superior del pie de página. Significa: 100% de altura - 50px. Esto debería suceder en cualquier resolución de monitor.

¿Cómo podría definir eso usando CSS? Algo como:

background-image {
height: 100% - 50px;
}
1
Rafael Munoz 22 mar. 2017 a las 18:38

2 respuestas

La mejor respuesta

Puede utilizar la función calc() para manejar esto, que usará un porcentaje dado de la altura de la ventana gráfica junto con algún otro cálculo explícito:

/* This assumes you have a background-size class */
.background-image {
  /* This sets the height to 100% of the viewport height minus 50px */
  height: calc(100vh - 50px);
}

También puede usar calc(100% - 50px) o cualquier otra combinación / expresión que prefiera.

Ejemplo

.background {
  /* This sets the height to 100% of the viewport height minus 50px */
  height: calc(100vh - 50px);
  background: #0071bc;
}
<div class='background'> </div>
3
Rion Williams 22 mar. 2017 a las 19:00

Puede usar background-size donde el primer valor es el ancho y el segundo valor es la altura del fondo y luego puede establecer la altura con calc() a 100% - 50px

div {
  height: 300px;
  width: 200px;
  border: 1px solid black;
  background-image: url('http://placehold.it/350x150');
  background-size: 100% calc(100% - 50px);
  background-position: center;
  background-repeat: no-repeat;
}
<div></div>
0
Nenad Vracar 22 mar. 2017 a las 15:48