How to change the layout of the block so that there are no problems with displaying the background?

S

sasha_jarvi2019-09-27 14:31:56

css

sasha_jarvi, 2019-09-27 14:31:56

There is the following block code:

<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>

On wide screens, the following problem is observed with background(whereas the image should fill the entire space from the right border of the gradient to the right border of the block): I

tried to solve the problem with background-size: cover, but the image is scaled too large:

here it is not scaled as large as in the screenshot above)

How can I solve this problem?
JSFiddle: https://jsfiddle.net/q1z96gs4

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

R

Roman, 2019-09-28
@sasha_jarvi

https://jsfiddle.net/4jh7e6zs/1/
https://jsfiddle.net/4jh7e6zs/2/
How wide is the screen?)
Personally, this only appears for me with a width of 3000px, I would think about such a nesting of div and the presence style attribute in tag