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;
}
2 respuestas
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>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>Preguntas relacionadas
Nuevas preguntas
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.