Поместить img в "фон", чтобы поместить на вверх img блок

Question

Формулировка заголовка странная, иначе не могу объяснить. делаю для себя практику по верстке на html/css (буквально неделю как), встал вопрос как мне сделать следующим образом: У меня стоит padding-left&right в 400px от краев, необходимо вставить картинку в фон этого блока(на скрине это 4 "карточки") так, чтобы она выходила за эти условные рамки и доходила до красной линии

если необходимо, вот мой код:

.vechicalbox {
    margin-top: 299px;
    display: flex;
    margin-left: 100px;
}

.fact_title {
    font-size: 48px;
    display: flex;
    justify-content: center;
    width: 804px;

}

.fact_boxed {
    position: relative;
    text-align: center;
    margin-top: 40px;
    display: flex;
    align-items: baseline;
}

.metallurgical {
    width: 268px;
    height: 408px;
    background-color: #fff;
    margin: 0 auto;
    border-radius: 8px;
    top: 90px;
}

.text_metallurg {
    margin-top: 36px;
}

.our_own {
    margin-left: 35px;
    width: 192px;
    height: 52px;
    font-size: 18px;
}
.text_mainmetallurg {
    margin-top: 7px;
    margin-left: 21px;
    width: 227px;
}

.sertified {
    width: 268px;
    height: 408px;
    background-color: #fff;
    margin: 0 auto;
    border-radius: 8px;
    top: 90px;
}

.text_sertified {
    margin-top: 36px;
}

.title_sertified {
    margin-left: 35px;
    width: 192px;
    height: 52px;
    font-size: 18px;
}

.text_mainmedalka {
    margin-top: 7px;
    margin-left: 25px;
    width: 216px;
}

.delivery {
    width: 268px;
    height: 408px;
    background-color: #fff;
    margin: 0 auto;
    border-radius: 8px;
    top: 90px;
}

.text_delivery {
    margin-top: 36px;
}

.title_delivered {
    margin-left: 35px;
    width: 192px;
    font-size: 18px;
    height: 52px;
}

.text_mainsclad {
    margin-top: 7px;
    font-size: 16px;
    width: 216px;
    margin-left: 26px;
}

.times {
    width: 268px;
    height: 408px;
    background-color: #fff;
    margin: 0 auto;
    border-radius: 8px;
    top: 90px;
}

.text_times {
    margin-top: 36px;
}


.title_clock {
    margin-left: 21px;
    margin-left: 60px;
    width: 145px;
    font-size: 18px;
    height: 52px;
}

.text_mainclock {
    margin-top: 7px;
    font-size: 16px;
    width: 216px;
    margin-left: 26px;
}

<div class="ourfactory">
                <div class="vechicalbox">
                <img src="images/Vechical box.svg" alt="" class="img_vechical">
                <h1 class="fact_title">Our Factory</h1>
                </div>
                    <div class="fact_boxed">
                        <div class="metallurgical">
                            <div class="text_metallurg">
                                <img src="images/Colba.svg" alt="" class="img_fact">
                                <h1 class="our_own">OUR OWN METALLURGICAL LAB</h1>
                                <p class="text_mainmetallurg">TAPP`s in-house metallurgical lab ensures consistet high quality steel. TAPP performs a Chemical composition test. Mechanical properties test, and Charpy V-notch test with all steel coils.</p>
                            </div>
                        </div>
                        <div class="sertified">
                            <div class="text_sertified">
                                <img src="images/Medalka.svg" alt="" class="img_fact">
                                <h1 class="title_sertified">ISO 9001:2008 SERTIFIED</h1>
                                <p class="text_mainmedalka">TAPP`s ISO 9001 program quarantees that products and services consistently meet customer`s requirements and that quality is continuously improving.</p>
                            </div>
                        </div>
                        <div class="delivery">
                            <div class="text_delivery">
                                <img src="images/Sclad.svg" alt="">
                                <h1 class="title_delivered">EVERY TYPE OF STEEL. DELIVERED.</h1>
                                <p class="text_mainsclad">TAPP can fabricate products from nearly any type of steel required including: ASTM A572, A588, A871, A36, A588, A501, A500, AA53 and many more.</p>
                            </div>
                        </div>
                        <div class="times">
                            <div class="text_times">
                                <img src="images/Clock.svg" alt="">
                                <h1 class="title_clock">BEST LEAD TIMES</h1>
                                <p class="text_mainclock">Whith over $30m of pre-purchased raw material on hand, combied whith highly automated machinery, TAPP can offer extremely competitive lead times on any project.</p>
                            </div>
                        </div>
                    </div>

            </div>

БЛОГ НА HUSL

Поместить img в "фон", чтобы поместить на вверх img блок

Ответы (0 шт):