Как бы я сделал этот фон изображения только для половины раздела? - PullRequest
Новая
       2

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

0 голосов
/ 08 февраля 2019

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

IЯ сделал так много попыток, что это слишком много, чтобы перечислить.Что я делаю не так и как я могу это исправить?

Вот мой HTML-код: 

<div class="row secOne secT">
    <div class="myImage col-md-6"></div>
</div>

Вот мой CSS-код: 

.row.secOne.secT {
    padding-top: 20px;
}

.myImage {
   background-image: url("https://images.pexels.com/photos/281260/pexels-photo-281260.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Ответы [ 3 ]

0 голосов
/ 08 февраля 2019

Вы можете отобразить синий фон вашего URL, установив свойство CSS высоты 

.row.secOne.secT {
    padding-top: 20px;
}

.myImage {
   background-image: url("https://images.pexels.com/photos/281260/pexels-photo-281260.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 22em;
}
<div class="row secOne secT">
    <div class="myImage col-md-6"></div>
</div>

Надеюсь, это поможет!

0 голосов
/ 08 февраля 2019

Я думаю, вы можете попробовать это: https://i.stack.imgur.com/fdk00.png Попробуйте это тоже - https://i.stack.imgur.com/meURR.png

Я надеюсь, что это поможет вам - извините, если это не так.

0 голосов
/ 08 февраля 2019

Я попытался создать простой html-файл, используя ваш код и, применив 

background-size: 50% 100%;
background-repeat: no-repeat;

к элементу с нужным фоном изображения, я получил что-то, что кажется вашим желаемым результатом.

Полный пример кода 

<html>
<head>
    <style>
    .col-md-6 {   /* Added this definition in order to get a visible div */
      width: 800px;
      height: 100px;
      border: 1px solid black;
    }
    .row.secOne.secT {
      padding-top: 20px;
    }

    .myImage {
      background-image: url("https://images.pexels.com/photos/281260/pexels-photo-281260.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
      -webkit-background-size: 50% 100%;
      -moz-background-size: 50% 100%;
      -o-background-size: 50% 100%;;
      background-size: 50% 100%; /* Force background size to only fill half the div */
      background-repeat: no-repeat; /* Avoid background repetitions */
    }
    </style>
</head>
<body>
    <div class="row secOne secT">
        <div class="myImage col-md-6">
          AAAAA
        </div>
    </div>
</body>

The result

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...