@sasha_jarvi

Как изменить верстку блока, чтобы не было проблем с отображением background?

Имеется следующий код блока:

<body>
  <div style="background: linear-gradient(110deg, rgb(66, 73, 81) 63%, transparent 63%), url(https://source.unsplash.com/random/860) right center / auto 100% no-repeat;">
    <div class="dark-slider__bg-block"></div>
    <div class="dark-slider__slide-content">
        <div class="dark-slider__wrapper">
            <h2 class="dark-slider__head">
                <div style="color: rgb(255, 255, 255);">
                    <div>
                        <div>
                            <div>
                                <div>
                                  <p>Экипировка Base</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </h2>
            <div class="dark-slider__text" style="color: rgb(255, 255, 255);">
                <div>
                    <div>
                        <div>
                            <div>
                                <div>
                                  <p>В комплекте для горных лыж вы получите лыжи и ботинки Salomon или Atomic. В комплекте для сноуборда будут доски Burton Cruzer или Progression с новыми ботинками Burton.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <a href="" class="dark-slider__button">Забронировать</a> 
            <a href="" class="dark-slider__link">Забронировать</a>
        </div>
    </div>
</div>
</body>


На широких экранах наблюдается следующая проблема с background (тогда как картинка должна заполнить все пространство от правой границы градиента до правой границы блока):
b3f893914c.jpg

Пробовал решить проблему при помощи background-size: cover, однако картинка слишком крупно масштабируется:
c8e58d5167.jpg

В итоге я хотел бы получить такой блок (как видно, картинка здесь на масштабируется так крупно, как на скриншоте выше)
a009e46701.jpg

Как можно решить данную проблему?
JSFiddle: https://jsfiddle.net/q1z96gs4
  • Вопрос задан
  • 146 просмотров
Решения вопроса 1
@GTech
Frontend-разработчик
https://jsfiddle.net/4jh7e6zs/1/
https://jsfiddle.net/4jh7e6zs/2/

На сколько широкий экран?)
Лично у меня только при ширине в 3000px такое появляется, я бы задумался о такой вложенности div и присутствии атрибута style в теге
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Sveak Барнаул
от 50 000 руб.
AUTEP Москва
от 100 000 до 300 000 руб.
Team B Воронеж
от 35 000 до 50 000 руб.
17 нояб. 2019, в 00:48
2000 руб./за проект
16 нояб. 2019, в 22:17
500 руб./за проект
16 нояб. 2019, в 22:10
2000 руб./за проект