Как обрезать background-image?

Question

[syncher]

Как изменить размер картинки, так чтоб при изменении вьюпорта до узких размеров не появлялась нижняя часть картинки (где текст)?
codepen.io/dhatt/pen/LbZOLx?editors=1100

Answer 1

[Алексей]

Через background-size

div {
  height: 100vh;
  background-image: url('http://i.imgur.com/X1iIDmp.jpg');
  background-position: center;
  background-size: 2600px auto;
}

Comments

[syncher]

Ваше решение не закрепляет ширину, картинка начинает повторятся, если поставить background-size: 1600px auto;

[Vladimir T]

syncher: А пробовали добавить background-repeat: no-repeat; чтобы фон не повторялся ?

[syncher]

Vladimir T: тогда обрезается карти7ка если экран большой - белый фон вылазит

[Prokudin-afk]

Это хорошее решение!

Answer 2

[Дмитрий Клусевич]

Очень странное решение с текстом на изображении. Это априори не правильно. Разделите текст и фон, это будет и вернее и удобнее. Ловить пиксели, на малейших изменениях это не очень хорошо.

Comments

[Максим]

я хотел спросить всегда как вижу такие слова (не придираюсь) - что такое априори ?и есть ли в богатейшем языке мира замена этому слову ?

[Дмитрий Клусевич]

В узком смысле это утверждение которое не требует доказательств. В данном контексте это значит, что изначально подход к данной проблеме не верен.

[Максим]

Дмитрий Клусевич: я рад что нашлось слово которое заменило латинщину

[Sergei Nazarenko]

. Shadow: использовать целое предложение ради замены одного слова, разве это замена ?

[Максим]

Sergei Nazarenko: ну как сказать то , можно вообще не каверкать русский язык и выражаться только на русском
я просто не вижу смысла в иностранных словах , иностранцы почему то не используют русские слова для выражения мысли - тот же пиzdec не заменим , но он присутствует только в русском

[Sergei Nazarenko]

. Shadow: да использут ипользуют, просто мало кто задумываетсяб или вообще догадывается что слова заимствованые. Ну англичане используют например французские слова ибо так исторически сложилось и у них нет английских аналогов в России с французским была похожая ситуация. Да давайте доходить до абсурда и убирать чужеродные слова и что останется? PS: Таже тарелка - заимствованое слово от немецкого Teller да и еще с десяток сотен слов просто вычеркнем из языка из за чьегото нелепого снобизма. https://goo.gl/Y3XRup

[Sergei Nazarenko]

. Shadow: begin-english.ru/article/rus-to-english

[syncher]

Изображение подобрано ОТ БАЛДЫ, это просто пример, чтобы научится управлять бэкраундом.

[syncher]

Т.е. я так понял средствами CSS то что мне нужно сделать невозможно?

[Дмитрий Клусевич]

syncher: Можно, но это изшенее манипулирования параметрами, а задачи нужно решать оптимально гибко, т.е если есть круглые колеса, не нужно ездить на квадратных.

[syncher]

Дмитрий Клусевич: можно? КАК?