背景画像横ぶち抜き

<style type="text/css">
/*<![CDATA[*/
  /* 768px以上のスクリーンに適応 */
@media screen and (min-width: 768px) {
    /* 背景画像エリア */
      #cc-m-12067674060                     /* カラム前のウィジェットのID */{
        display: block;
        min-height: 550px;                  /* 背景画像エリアの高さ */
        background-image: url(https://image.jimcdn.com/app/cms/image/transf/none/path/s28c527c0978b57be/image/i1fddcad1dd1e00a1/version/1568012902/image.jpg); /* 背景で使う画像URL */
        background-size: cover;             /* 背景画像の表示種類 */
        margin: 50px -100%;                 /* 最初は前コンテンツからの距離 2つめどの程度横幅ぶち抜くか */  
        padding: 0 50% !important;          /* 余白指定 */  
    }
    
    /* 背景にのせるカラムの位置 カラムのID指定*/
    #cc-m-12066331260 {
        margin-top: -550px;                 /* カラムのコンテンツエリア　背景画像のマイナスの数字を指定 */  
        margin-bottom: 100px;               /* この数値が小さいとカラムの下のコンテンツが背景画像に被ってくる */  
    }
    
    /* 背景の文字にシャドー カラムのID指定*/    
    .content-options #cc-m-12066331260 .j-header h2,
    .content-options #cc-m-12066331260 .j-text p {
        color: #fff !important;
        text-shadow: 1px 2px 2px rgba(0,0,0,0.6);
    }
    .content-options #cc-m-12066331260 .j-header h2 {
        font-size: 32px !important;
    }
    .content-options #cc-m-12066331260 .j-header h3,
    .content-options #cc-m-12066331260 .j-text p {
        color: #fff !important;
        text-shadow: 1px 2px 2px rgba(0,0,0,0.6);
    }
    .content-options #cc-m-12066331260 .j-header h3 {
        font-size: 22px !important;
    }
}

/* 768px以下のスクリーンに適応、背景を画像ではなくてプレーンに */
@media screen and (max-width: 768px) {
    .bg-wide-black {
        margin: 40px -100%;
        padding: 30px 100% !important;
        background-color: #000;
    }
    /* 背景の文字にシャドー カラムのID指定*/    
    .content-options #cc-m-12066331260 .j-header h2,
    .content-options #cc-m-12066331260 .j-text p {
        color: #fff !important;
        text-shadow: 1px 2px 2px rgba(0,0,0,0.6);
    }
    .content-options #cc-m-12066331260 .j-header h2 {
        font-size: 32px !important;
    }
    .content-options #cc-m-12066331260 .j-header h3,
    .content-options #cc-m-12066331260 .j-text p {
        color: #fff !important;
        text-shadow: 1px 2px 2px rgba(0,0,0,0.6);
    }
    .content-options #cc-m-12066331260 .j-header h3 {
        font-size: 22px !important;
    }
}
}
/*]]>*/
</style>