.bb-image {
    /* background-image: url('../../img/background-image.jpg'); */

    -webkit-background-size: cover; /* pour Chrome et Safari */
    -moz-background-size: cover; /* pour Firefox */
    -o-background-size: cover; /* pour Opera */
    background-size: cover; /* version standardisée */

    background-position: center;
    background-repeat: no-repeat;
    /* background-attachment: fixed; */
    color: snow;
    text-shadow: 1px 1px 8px black;
}

.bb-image .text-image {
    padding: 20px;
    /* Anciens navigateurs */
    background: url("img/bb-image-text-image-bg.png") repeat-y left;
    -o-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    /* Internet Explorer */
    *background: none;
    background: none\0/;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="bb-image-text-image-bg.png", sizingMethod="scale");
}

.bb-image .text-image {
    /* Opera */
    background: url("img/bb-image-text-image-bg.svg");
    /* Navigateurs récents */
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0.3)));
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0));
    background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0));
    background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0));
    background-image: linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0));
}

/* titre */
.bb-image h2 {
    font-size: 40px;
}

/* texte */
.bb-image p {
    font-size: 20px;
}

/* < 768 px */
/*@media screen and (max-width: 768px) {
    #image {
        height: 120px;
    }

}*/

/* > 768 px */
@media screen and (min-width: 768px) {
    #image {
        height: 250px;
    }

   
}

/* > 992 px */
@media screen and (min-width: 992px) {
    #image {
        height: 300px;
    }

  
}

/* > 1260 px */

@media screen and (min-width: 1200px) {
    #image {
        height: 400px;
    }

    
}

/*
#commentaire:before {
    content:url('../../public/img/home/guillemet_debut.png'); 
    position:relative;
    z-index:100000;
    right:-50px;
    top:10px;
}

#commentaire:after {
    content:url('../../public/img/home/guillemet_fin.png');
    position:relative;
    z-index:100000;
    left:-50px;
    top:30px;
}
*/