Как сделать адаптивный фон на CSS, чтобы края картинки обрезались?

Question

[Alexander-K]

При использовании background-size - на малых разрешениях картинка уменьшается по ширине, но вместе с тем и уменьшается по высоте.
А высота должна оставаться такой же, соответственно надо обрезать края картинки, чтобы показывался только ее центр.
Как это сделать?

Answer 1

[Emperor]

Задаётся height нужного значения, а background центрируется + свойство cover (важно!)

background: url("../img/background.jpg") no-repeat top center; /*либо center center*/
background-size: cover;
height: 700px;

Тогда всё должно получиться.

Answer 2

[Андрей Федоров]

background: 50% 0% url('http://lorempixel.com/1920/300/') no-repeat;
height: 300px;

высота фиксированая - 300px, фон центруется.

Answer 3

[DenJel]

Классика, лучший вариант имхо

<div class="wrapper">
   <div class="inner"></div>
<div>

.wrapper {
   overflow-x: hidden;
   height: 300px;
}
.inner{
   background: blablabla;
   height: 300px;
   width: 600px; 
   position: relative;
   left: 50%; 
   margin-left: -300px;
}