基本的にコーディングをするとき、.containerや.mainのdivで囲み、そのdiv要素はwidth1000pxとかに設定しますよね。
でも一部だけその要素を突き抜けてブラウザ幅いっぱいに表示したくなるときがあります。

そんなときのcssがこれ。

width: 100vw;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;

親要素無視のcssにパララックスを追加＆背景の上に透過の画像を載せると。

.parallax{
    width: 100vw;　/*親要素を無視してブラウザ幅100%で表示*/
    left: 50%;　/*親要素を無視してブラウザ幅100%で表示*/
    right: 50%;　/*親要素を無視してブラウザ幅100%で表示*/
    margin-left: -50vw;　/*親要素を無視してブラウザ幅100%で表示*/
    margin-right: -50vw;　/*親要素を無視してブラウザ幅100%で表示*/
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    min-height: 300px;
}
.parallax::before {
    /* 透過した黒ドットを画像の上に重ねる */
　　background-image: url(../img/bg-dot-b01.png);
    background-color: rgba(0, 0, 0, 0.5);
    /* どの範囲に重ねるかを指定 */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: ' ';
    z-index: 0;
}

.images{
    background-image: url(背景画像);
}