Как сделать slick slider заднего фона?

Question

[osimone]

Я что то делаю не так
изображение не растягивается по высоте, почему то становится бэкграундом для текста

<div class="carousel">
        <div class="banner_slider_wrap">
            <div class="banner_slider">
                <div class="slide-1">
                    <h2 class="title">
                        Множество оригинальных,
                            непохожих на европейские
                            модели рюкзаков
                    </h2>
                </div>

                <div class="slide-2">
                    <h2 class="title">
                        Множество оригинальных,
                            непохожих на европейские
                            модели рюкзаков
                    </h2>
                </div>
                <div class="slide-3">
                    <h2 class="title">
                        Множество оригинальных,
                            непохожих на европейские
                            модели рюкзаков
                    </h2>
                </div>
                <div class="slide-4">
                    <h2 class="title">
                        Множество оригинальных,
                            непохожих на европейские
                            модели рюкзаков
                    </h2>
                </div>
            </div>
        </div>
    </div>

.carousel {
    .banner_slider {
        width: 100%;
        height: 100%;
        .slide-1 {
            background: url(../../img/Background2.png) center (center/cover) no-repeat;
            width: 100%;
            height: 100%;
        }
        .slide-2 {
            background: url(../../img/Background2.2.jpg.png) center (center/cover) no-repeat;
            width: 100%;
            height: 100%;
        }
        .slide-3 {
            background: url(../../img/Background2.3.png) center (center/cover) no-repeat;
            width: 100%;
            height: 100%;
        }
        .slide-4 {
            background: url(../../img/Background2.4.png) center (center/cover) no-repeat;
            width: 100%;
            height: 100%;
        }
         .slick-next {
            background: url(../../icons/knopka_vpravo_139.png) center (center/cover) no-repeat;
            font-size: 0px;
            opacity: 0.6;
            background-size: 80%;
            border: 0px;
            width: 118px;
            height: 108px;
            position: absolute;
            right: 250px;
            top: 38%;
            margin-top: -73px;      
            z-index: 10;      
        }
        .slick-prev {
            background: url(../../icons/knopka_vlevo_138.png) center (center/cover) no-repeat;
            font-size: 0px;
            background-size: 80%;
            opacity: 0.6;
            border: 0px;
            width: 118px;
            height: 108px;
            position: absolute;
            left: 250px;
            top: 38%;
            margin-top: -70px;    
            z-index: 10;        
        }

должен получиться вот такой результат

Answer 1

[osimone]

решение нашел

Comments

[AntonCinet]

какое решение, скинь плиз?

[osimone]

AntonCinet, решение оказалось простым, в html в каждом div.slide добавил style="bacground-image: url(путь к картинке);
а в CSS уже эти классы slide-1 и тд добавил стили

<div class="carousel">
            <div class="banner_slider">
                <div class="slide-1" style="background-image: url(img/Background2.png);">
                    <div class="text">
                        <h2 class="title">
                            Множество оригинальных,
                                непохожих на европейские
                                модели рюкзаков
                        </h2>
                    </div>
                </div>

                <div class="slide-2" style="background-image: url(img/Background2.2.jpg.png);">
                    <div class="text">
                        <h2 class="title">
                            Это рюкзаки, которые вне
                            законов моды: они подходят
                            людям любого возраста и
                            вкусовых предпочтений
                        </h2>
                    </div>
                </div>

                <div class="slide-3" style="background-image: url(img/Background2.3.png);">
                    <div class="text">
                        <h2 class="title">
                            Дизайнеры моделируют и
                            сочетают различные ткани 
                            и материалы
                        </h2>
                    </div>
                </div>

                <div class="slide-4" style="background-image: url(img/Background2.4.png);">
                    <div class="text">
                        <h2 class="title">
                            Небольшого веса, однако,
                            в них отлично помещаются
                            самые необходимые
                            личные вещи
                        </h2>
                    </div>
                </div>
            </div>

.carousel {
    .banner_slider {
        .slide-1 {
            background-size:cover;
            background-position: center;
            background-repeat: no-repeat;
            height: 850px;
            width: 100%;
        }
        .slide-2 {
            background-size:cover;
            background-position: center;
            background-repeat: no-repeat;
            height: 850px;
            width: 100%;
        }
        .slide-3 {
            background-size:cover;
            background-position: center;
            background-repeat: no-repeat;
            height: 850px;
            width: 100%;
        }
        .slide-4 {
            background-size:cover;
            background-position: center;
            background-repeat: no-repeat;
            height: 850px;
            width: 100%;
        }

[AntonCinet]

osimone, thank you!

Answer 2

[archelon]

center (center/cover)
это что за конструкция?

background: url(../../img/Background2.png) center center / cover no-repeat;

Comments

[osimone]

разницы не увидел, ничего не меняется