Используя CSS и Bootstrap, как вы можете установить фоновое изображение размером 1/3 от размера экрана?

Question

Я делаю следующее, используя встроенный CSS с Bootstrap. Тем не менее, это не работает.

<div class="container" class="img-responsive" class="img-fluid" style="background-image: url('img/projects_cover.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center center; width: 100%; height: 100%">

Answer 1

Вы можете попробовать это ...

.container {
  /* here Background color is optional*/
  background: #000 url("https://images.unsplash.com/photo-1535702181453-dae70f42a117?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=504cb79cca4c38e00b57228e48441e81&dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb");
  background-size: 33%;
  background-repeat: no-repeat;
  background-position: center center;
  width: 100%;
  height: 100vh;
  /* optional*/
  
  font-size: 30px;
  color: #fff;
  text-align: center;
}

<div class="container">The Image is in the backround</div>

Answer 2

Ваш background-size: cover означает "покрыть все div этим изображением 100%"

Измените его на background-size: 33% 100%;

DEMO LINK

<div class="container" class="img-responsive" class="img-fluid" style="background-color: red; background-image: url('https://gyazo.com/79d8af055c1ff36c01c01fb530d896de.png'); background-repeat: no-repeat; background-size: 33% 100%; background-position: center center; width: 100%; height: 200px; border: 1px solid red;">

P.s. Вы можете написать class="container img-responsive img-fluid"
Вместо class="container" class="img-responsive" class="img-fluid"