html - poner - imagen de fondo bootstrap 4

CSS Div Imagen de fondo Altura fija 100% Ancho

Question

Estoy tratando de configurar una serie de div con una imagen de fondo que cada uno tiene su propia altura fija, y estirar para llenar el ancho, incluso si hay un desbordamiento en la parte superior / inferior que se recorta. Simplemente no quiero el espacio en blanco en los bordes.

Actualmente, tengo: http://jsfiddle.net/ndKWN/

CSS

    #main-container {
        float:left;
        width:100%;
        margin:0;
        padding:0;
        text-align: center;
    }

    .chapter{
        position: relative;
        height: 1400px;
        z-index: 1;
    }

    #chapter1{
    background: url(http://omset.files.wordpress.com/2010/06/homer-simpson-1-264a0.jpg) 50% 0 no-repeat fixed;
        height:1200px;
    }

    #chapter2{
    background: url(http://download.ultradownloads.com.br/wallpaper/94781_Papel-de-Parede-Homer-Simpson--94781_1680x1050.jpg) 50% 0 no-repeat fixed;
        height:1200px;
    }

Answer 1

Pero la cosa es que la clase .chapter no es dinámica, estás declarando una altura: 1200px

así que es mejor usar fondo: cubrir y configurar con consultas de medios de altura específicas para resoluciones populares.

Answer 2

Vea mi respuesta a una pregunta similar here .

Parece que desea que una imagen de fondo mantenga su propia relación de aspecto mientras se expande al 100% de ancho y se recorta en la parte superior e inferior. Si ese es el caso, haz algo como esto:

.chapter {
    position: relative;
    height: 1200px;
    z-index: 1;
}

#chapter1 {
    background-image: url(http://omset.files.wordpress.com/2010/06/homer-simpson-1-264a0.jpg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center top;
    background-attachment: fixed;
}

jsfiddle: http://jsfiddle.net/ndKWN/3/

El problema con este enfoque es que tiene los elementos contenedores a una altura fija, por lo que puede haber espacio debajo si la pantalla es lo suficientemente pequeña.

Si desea que la altura mantenga la relación de aspecto de la imagen, tendrá que hacer algo como lo que escribí en una edición a la respuesta que vinculé anteriormente. Establezca la height del contenedor en 0 y establezca el padding-bottom al porcentaje del ancho:

.chapter {
    position: relative;
    height: 0;
    padding-bottom: 75%;
    z-index: 1;
}

#chapter1 {
    background-image: url(http://omset.files.wordpress.com/2010/06/homer-simpson-1-264a0.jpg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center top;
    background-attachment: fixed;
}

jsfiddle: http://jsfiddle.net/ndKWN/4/

También puede poner el porcentaje de padding-bottom en cada estilo de #chapter si cada imagen tiene una relación de aspecto diferente. Para utilizar diferentes relaciones de aspecto, divida la altura de la imagen original por su propio ancho y multiplique por 100 para obtener el valor porcentual.

Answer 3

http://jsfiddle.net/ndKWN/1/

Puede utilizar background-size: cover;