Как добавить фоновое изображение в столбец div - PullRequest
Новая
       38

Как добавить фоновое изображение в столбец div

0 голосов
/ 01 июля 2019

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

Я попытался использовать тот же код, что и столбецсправа и делает стиль = background-image: ... но это не сработало.Это сработало только, если бы я сделал цвет фона. 

    .column left {
background-image: url('i.imgur.com/k5gf0zz.jpg');
background-size: cover;
}

</style>
</head>
<body>



<div class="row">
<div class="column left" >

  </div>
  <div class="column right" style="background-color:#FDE4EC;">

Я бы хотел, чтобы изображение заполнило фон столбца слева, но сейчас оно отображается пустым.

Спасибо

Ответы [ 3 ]

2 голосов
/ 01 июля 2019

Ваш url(...) должен быть полным URL ... в противном случае вы пытаетесь загрузить файл, локальный для вашего домена.

Так что обновите ... 

background-image: url('i.imgur.com/k5gf0zz.jpg');

Для того, чтобы ... 

background-image: url('http://i.imgur.com/k5gf0zz.jpg');

(или https://, если это более уместно) 

.column {
  float:left;
  width:50%;
  height:100vh;
}
.left {
  background-image: url('http://i.imgur.com/k5gf0zz.jpg');
  background-size:cover;
  background-position:center;
}
.right {
  background-color:#FDE4EC;
}
<div>
  <div class="column left"></div>
  <div class="column right"></div>
</div>

Кроме того, как заметил @Paulie_D в своем комментарии к вашему исходному сообщению, ваш селектор CSS должен быть .column.left вместо .column left.

В вашем элементе class="column left" означает, что он использует оба класса column и left.

Но в вашем CSS, если вы установите селектор .column left, это означает, что вы будете форматировать только элементы с именем <left>, которые содержатся внутри элементов, которые имеют class="column".

Используя .column.left, вы форматируете элементы, которые имеют оба классов

0 голосов
/ 01 июля 2019

Попробуйте это:

HTML 

<div class="row">
 <div class="column left">
  </div>
  <div class="column right" style="background-color:#FDE4EC;">
  </div>
</div>

CSS 

.column.left {
  background-image: url("https://i.imgur.com/k5gf0zz.jpg");
  background-size: cover;
  width: 100px;
  height: 100px;
  display: inline-block;
  position: relative;
}

.column.right {
  width: 100px;
  height: 100px;
  display: inline-block;
  position: relative;

}

Проблемы с вашим кодом:

  1. Неверно URL
  2. Нет указания ширины, высоты и положения для блока div

демоверсия рабочего кода

0 голосов
/ 01 июля 2019

это будет работать для вас. Ваш URL не был объявлен должным образом. кроме того, вы используете начальную загрузку, и в класс строк необходимо добавить класс, чтобы разделить экран на левую и правую. Я попытался сделать вашу структуру кода немного лучше. пожалуйста, посмотрите. 

.col-sm-6.column.left {
  background-image: url("https://www.w3schools.com/w3css/img_lights.jpg");
  background-size: cover;
  color: white
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">



<div class="row">
  <div class="col-sm-6 column left">
    left
  </div>
  <div class="col-sm-6 column right" style="background-color:#FDE4EC;">
    right
  </div>
</div>
</div>
...