Обрезанный фон в верстке

Question

Требуется, чтобы эта фоновая картинка

отображалась во весь свой размер, но вместо этого, она почему то обрезается

.section {
  padding: 80px 0;
}

.section_header {
  width: 100%;
  max-width: 950px;
  margin: 0 auto 50px;
  text-align: center;
}

.section_title {
  font-family: 'Montserrat', sans-serif;
  font-size: 27px;
  color: black;
}

.section_title:after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  margin: 30px auto 0;
  background-color: #a05e2d;
}

.section_text {
  font-size: 25px;
  font-weight: 700;
  color: #f6950a;
}

.section--supply {
  background: url("../image/back2.jpeg") center no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}

<section class="section  section--supply">
  <div class="container">

    <div class="section_header">
      <h2 class="section_title">Unique supply</h2>
    </div>

  </div>
</section>

Answer 1

Ну например вот так:

html,body { width: 100%; height: 100%; margin: 0; background: black;  }

.section {
 	padding: 80px 0 ;
 }

 .section_header {
 	width: 100%;
 	max-width: 950px;

 	margin: 0 auto 50px;

 	text-align: center;
 }

 .section_title {
 	font-family: 'Montserrat', sans-serif;
 	font-size: 27px;
 	color: black;

 } 

 .section_title:after {
 	content: "";
 	display: block;
 	width: 60px;
 	height: 3px;
 	margin: 0px auto 0;

 	background-color: #a05e2d;
 	
 }

 .section_text {
 	font-size: 25px;
 	font-weight: 700;
 	color: #f6950a;

 }

.section--supply {
  height: 100%;
 	background: url("https://sun9-54.userapi.com/Ybexrl6fNZpYzLtatZtQCsxj38B--_LAxqL6FA/oMTCtIUVIr0.jpg") center no-repeat;
	-webkit-background-size: cover;
 	background-size: cover;
 }

<section class="section  section--supply">
	<div class="container">

		<div class="section_header">
			<h2 class="section_title">Unique supply</h2>
		</div>

	</div>
</section>

Либо свойство background-size поменять на contain

БЛОГ НА HUSL

Обрезанный фон в верстке

Ответы (1 шт):