Responsywny background

Question

Cześć!

Mam pewien problem ze zrobieniem projektu, na szablonie od grafika dostałem do pocięcia stronke.

Szerokość strony którą dostałem w mockach wynosi 1440px. Sekcja która mnie interesuje wynosi 840px szerokości oraz 600px wysokości, obok niej znajduje sie sekcja z formularzem która zjamuje 600px x 600px. W pierwszej sekcji(większej) znajduje się na całym tle(w całym jakby divie) obrazek, z prawej storny-jak już mówiłem, w drugiej sekcji jest formularz. Pytanie brzmi, jak mam to rozgryźć responsywnie, pracuje na dużym monitorze, poza tym ktoś może odpalić stronę na telewizorze. Px perfect odpada. Rzucać to wszystko na oko, czy jest jakieś spoko rozwiązanie? Jakoś policzyć coś? ;p HTML dotychczas wygląda tak: 

<header class="header">
            <div class="header__left"></div>
            <div class="header__right">
                <div class="header__content-container"></div>
            </div>
</header>

css'y natomiast wyglądają w ten sposób: 

.header {
    background: $color-main;
    height: calc(100vh - 70px);
    display: flex;
}
.header__left {
    background: url('../../assets/mountains.svg')no-repeat;
    background-size: 100%;
    flex:2.4;
}
.header__right {
    flex:1.7;
    padding:100px;
}

Wiem, słabe rozwiązanie, dlatego też do was piszę, macie jakieś propozycje jak ugryźć to najlepiej, żeby od razu podpasowało pod rwd?

Pozdro!

Answer 1

jesli dobrze rozumiem to mozesz uzyc

% lub okreslac dla danego przedzialu rozdzielczosci wymiary za pomoca px uzywajac  np

@media only screen and (max-width: 1600px) and (min-width:1366px) {

   div{
     width:1440px;
    }

}