The background is full width, but the content is only in the container how?

Question

css

There is a regular bootstrap grid: .container>.row>.col*2
You need to arrange 2 backgrounds so that they match in the header and in the main part:

1. So that it would start at the left corner of the screen and end at the end of .col-9
   
2. So that would start at the beginning of .col-3 and end at the right corner of the screen
   

Like this :

The width is naturally not fixed for .col
Help please, I will be very grateful for any help.

Answer 1

I would simply divide the section into two parts 50 by 50 and fill in the background image in such color proportions, and in the section itself I would already make a container, and I would fill the columns in the desired colors, since the background of the section will stretch, and each column will have its own colors, then the user won’t notice anything, he didn’t personally check it, so this is just a theory))