@Fresko1991

Как сделать чтоб белый фон контейнера не выглядывал из под картинки?

Черный фон для наглядности. Картинка не полностью перекрывает контейнер под ней по верхнему краю.60bd3f4c7377f974663291.jpeg

<section class="servis">
        <div class="container">
            <h1 class="servis-header">
                Услуги
            </h1>
            <div class="content servis-container-content">
                <div class="champane">
                    <div class="champane-descr">
                        <p class ="champane-descr-header">Эксклюзивное обслуживание ⧽</p>
                        <p class ="champane-descr-low">Равным образом постоянный количественный рост и сфера нашей активности</p>
                    </div>
                </div>
                <div class="bassein">
                    <div class="bassein-descr">
                        <p class ="bassein-descr-header">Сауны, бассейны, бани, фитнес-залы ⧽</p>
                        <p class ="bassein-descr-low">Не следует, однако забывать, что начало повседневной работы по формированию позиции</p>
                    </div>
                </div>
                <div class="cars">
                    <div class="cars-descr">
                        <p class ="cars-descr-header">Охраняемые автомобильные стоянки ⧽</p>
                        <p class ="cars-descr-low">Вы можете не беспокоиться за сохранность вашего автомобиля</p>
                    </div>
                </div>
                <div class="hotel">
                    <div class="hotel-descr">
                        <p class ="hotel-descr-header">Аренда банкетных залов ⧽</p>
                        <p class ="hotel-descr-low">Значимость этих проблем настолько очевидна, что дальнейшее развитие различных форм.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>


.servis-header {
    font-style: normal;
    font-weight: normal;
    font-size: 40px;
    line-height: 40px;
    color: #333333;
    text-indent: 40px;
}
.servis-container-content {
    display: grid;
    gap: 20px;
    padding-top: 20px;
    padding-bottom: 100px;
    grid-template-areas: 
    "champane hotel"
    "bassein cars";
}


.champane {
    position: relative;
    grid-area: champane;
    width: 570px;
    height: 330px;
    border-radius: 15px;
    cursor: pointer;
    background-color:#FFFFFF;
    background-image: url(/src/img/shampane.png);
    background-repeat: no-repeat;
    background-position: top;
}

.bassein {
    grid-area: bassein;
    width: 570px;
    height: 330px;
    border-radius: 15px;
    cursor: pointer;
    background-color:#FFFFFF;
    background-image: url(/src/img/pool.png);
    background-repeat: no-repeat;
    background-position: top;
}
.cars {
    grid-area: cars;
    width: 570px;
    height: 330px;
    border-radius: 15px;
    cursor: pointer;
    background-color:#FFFFFF;
    background-image: url(/src/img/cars.png);
    background-repeat: no-repeat;
    background-position: top;
}
.hotel {
    grid-area: hotel;
    width: 570px;
    height: 330px;
    border-radius: 15px;
    cursor: pointer;
    background-color:#FFFFFF;
    background-image: url(/src/img/table.png);
    background-repeat: no-repeat;
    background-position: top;
}
.champane-descr {
    width: 400px;
    height: 90px;
    margin: 200px 126px 50px 26px;
    line-height: 0;
}
.bassein-descr {
    width: 420px;
    height: 90px;
    margin: 200px 126px 50px 26px;
}
.cars-descr {
    width: 400px;
    height: 90px;
    margin: 200px 126px 50px 26px;
}
.hotel-descr {
    width: 400px;
    height: 90px;
    margin: 200px 126px 50px 26px;
}
.champane-descr-header {
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 200%;
    color: #CC9933;
    margin-bottom: -10px;
}
.bassein-descr-header {
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 200%;
    color: #CC9933;
    margin-bottom: -10px;
}
.cars-descr-header {
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 200%;
    color: #CC9933;
    margin-bottom: -10px;
}
.hotel-descr-header {
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 200%;
    color: #CC9933;
    margin-bottom: -10px;
}

.champane-descr-low {
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 200%;
    color: #000000; 
    font-weight: bold;   
}
.bassein-descr-low {
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 200%;
    color: #000000;   
    font-weight: bold; 
}
.cars-descr-low {
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 200%;
    color: #000000;   
    font-weight: bold; 
}
.hotel-descr-low {
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 200%;
    color: #000000;  
    font-weight: bold;  
}


Перепробовал кучу вариантов. Делал картинку не фоном, а через тэг img и ставил ей значение width:100% как советуют в интернете, не помогло.
background-position: top; немного улучшило ситуацию и слева не торчат белые полоски,но наверху все также плохо.
  • Вопрос задан
  • 67 просмотров
Решения вопроса 1
@mikhailivanko
Все норм:
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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