Создание масштабируемого повторяющегося фона для столбца в bootstrap - PullRequest
Новая
       140

Создание масштабируемого повторяющегося фона для столбца в bootstrap

0 голосов
/ 05 августа 2020

У меня возникают проблемы с bootstrap и созданием масштабируемого фона столбца.

В одной строке у меня есть столбец с плавным изображением (верхняя часть поля), столбец ниже , этот столбец имеет класс CSS, чтобы придать ему повторяющийся фон по оси Y, и, наконец, столбец ниже с другим жидким изображением (нижняя часть поля).

Итак, идея состоит в этих двух изображениях являются верхней и нижней частью поля, тогда центральное фоновое изображение будет повторяться по оси Y и идеально совпадать с двумя изображениями, делая его похожим на закрытый прямоугольник, независимо от длины содержимого.

Однако независимо от того, что я пробую, фоновое изображение центрального поля всегда смещено, поэтому оно немного просачивается (см. Изображение ниже). Может ли кто-нибудь помочь мне выстроить это в очередь?

enter image description here

I'm using the following code:

HTML

 Что такое крабы  CRABS - это многопользовательская феерия, основанная на аренах!  
 Сражайтесь с друзьями или искусственным интеллектом в различных уникальных и захватывающих игровых режимах в соревновательной и кооперативной локальной игре на диване.  Платформы текущего и следующего поколения.   Что такое крабы

CSS

.crabs-textbox-centre
    padding: 0 40px 0 40px;
    background-image: url("../img/games/crabs/framework/box-centre.png");
    height: auto;
    background-repeat: repeat-y;
    background-size: 100%;
    background-position: center center;

1 Ответ

0 голосов
/ 05 августа 2020

Спасибо за комментарий fatalcoder ... Я исправил проблему, используя следующую настройку:

Я создал два новых элемента стиля CSS, каждый со своим собственным фоном для верхней и нижней частей, затем я просто добавьте эти столбцы выше.

Любая конкретная мобильная версия c размер выполняется с помощью медиа-запроса, см. код ниже:

HTML

<div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-12 order-1 crabs-textbox-top">
            </div>

            <div class="col-lg-12 col-md-12 col-sm-12 col-12 order-2 crabs-textbox-centre">
            <h1 class="text-center"><span class="text-danger strong">CRABS is an arena based, multiplayer, party brawler extravaganza!</span><br></h1>
            <h2 class="text-center">Battle friends or AI across a range of unique and exciting game modes in competitive and co-op local couch play.</h2>
            <h2 class="text-center">Current and next-gen platforms.</h2>
            </div>

            <div class="col-lg-12 col-md-12 col-sm-12 col-12 order-3 crabs-textbox-bottom">
            </div>

        </div>

CSS

.crabs-textbox-top{
    margin: 20px 0 0 0;
    height: 64px;
    background-image: url("../img/games/crabs/framework/box-top.png");
    background-repeat: no-repeat;
    background-size: 95%;
    background-position: bottom center;
}

.crabs-textbox-centre{
    padding: 0 60px 0 60px;
    height: auto;
    background-image: url("../img/games/crabs/framework/box-centre.png");
    background-repeat: repeat-y;
    background-size: 95%;
    background-position: center center;
}

.crabs-textbox-bottom{
    margin: 0 0 20px 0;
    height: 64px;
    background-image: url("../img/games/crabs/framework/box-bottom.png");
    background-repeat: no-repeat;
    background-size: 95%;
    background-position: top center;
}

@media screen and (max-width: 767px) {

.crabs-textbox-top{
    margin: 10px 0 0 0;
    height: 30px;
    }

.crabs-textbox-bottom{
    margin: 0 0 10px 0;
    height: 30px;
    }
    
}
...