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;
}
css image
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

Preguntas relacionadas

24 Cómo hacer un div 100% de altura de la ventana del navegador
15 ¿Es posible aplicar CSS a la mitad de un personaje?

Nuevas preguntas

2 No se puede mover el cuadro con márgenes o izquierdaxx
2 ¿Cómo crear un campo de entrada receptivo en la barra de navegación?
2 Eliminar la clase no deseada del elemento
3 Agregar clase a un elemento que se carga en una página
2 <li> el elemento en la barra de navegación se extiende demasiado hacia el lado derecho en dispositivos más pequeños en herramientas de desarrollo
3 ¿Cómo se hace correctamente un encabezado fijo con contenido debajo?
2 Ocultar padre, mostrar hijo si el padre carece de una clase específica
2 ¿Cómo mostrar un indicador de alerta después de ser redirigido?
2 ¿Cómo poner el color del texto como imagen de fondo usando CSS?
2 CSS aplicado al objeto incorrecto Angular 8
Nuevas preguntas con la etiqueta css >

css

CSS (Cascading Style Sheets) es un lenguaje de hojas de estilo de representación utilizado para describir el aspecto y el formato de documentos HTML (HyperText Markup Language), XML (Extensible Markup Language) y elementos SVG que incluyen (pero no se limitan a) colores, diseño, fuentes, y animaciones. También describe cómo se deben representar los elementos en la pantalla, en papel, en el habla o en otros medios.

css...