Un bloc qui voit large !

Imaginons qu'on aient un site avec un conteneur principal qui est centré et qui fait une certaine largeur.

On a par exemple le css suivant :

.max-width-container {
    max-width: 970px;
    margin-inline: auto;
}

A un moment dans la page du site vous avez un bloc qui doit avoir une couleur de fond qui doit faire toute la largeur du site.

Une première solution pourrait être de sortir ce bloc du .max-width-container pour qu'il puisse prendre toute la largeur et de ré-ouvrir .max-width-container pour les blocs suivants.

Le soucis c'est que celà oblige à modifier la structure HTML de la page et on ne peut pas forcément toujours le faire simplement.

Il y a une solution simple qui ne demande qu'une ligne de CSS en utilisant les border-image. Le principe est d'appliquer à votre élément un border-image qui va prendre toute la largeur de la fenêtre (ou moins selon vos besoin).

Comme on ne peut pas définir une couleur unique pour un border-image on va utiliser les dégradés.

.main-container {
    width: 50vw;
    margin-inline: auto;
    border: 1px solid #000;
}

.box {
    margin-block-end: 35px;
}

.full-background {
    border-image: linear-gradient(grey) fill 0 // 0 100vw;
    padding-block: 10px;
}

Quelques explications

border-image: <source> <slice> / <width> / <outset> <repeat>

linear-gradient(grey) : C'est un dégradé lineaire qui n'a qu'une seule couleur.

fill 0 : Permet de dire que la couleur doit aussi remplir le bloc.

//0 100vw : Indique que la border fait 0 en hauteur et 100vw en largeur.

Voici une version équivalente mais plus décomposée :

.full-background {
    border-image-source: linear-gradient(grey);
    border-image-slice: 0 fill;
    border-image-width: auto;
    border-image-outset: 0 100vw;

    padding-block: 10px;
}

Pour aller plus loin

Vous pouvez bien sur remplacer la couleur par une image en utilisant la variante suivante :

.full-background-image {
    border-image-source: url(https://picsum.photos/1920/300);
    border-image-slice: 0 fill;
    border-image-width: auto;
    border-image-outset: 0 100vw;

    /* Version en une ligne
    border-image: url(https://picsum.photos/1920/300) fill 0 //0 100vw;*/

    padding-block: 10px;
}

Résultat