@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
  • Вопрос задан
  • 164 просмотра
Решения вопроса 1
@GTech
Frontend-разработчик
https://jsfiddle.net/4jh7e6zs/1/
https://jsfiddle.net/4jh7e6zs/2/

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

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

Войти через центр авторизации
Похожие вопросы