0

У меня есть картинка размером 2000х1333 и мне нужно поставить ее на бг, чтоб полностью по блоку была. Когда я пытаюсь, то получается что-то типа того: (красный бордер - размер блока) фэйл

CSS:

#header {
 background: #fff url('../img/bg1.png') center no-repeat;
 background-size: auto;
 max-width: 1920px;
 height: 1080px;
 border-top: 11px solid #204055;
 border: 1px solid red;
}
5
  • background-size: cover | contain | 100%;
    – SVE
    3 окт 2016 в 17:59
  • contain: Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока. Немного не то, что нужно.
    – Ep1demic
    3 окт 2016 в 18:01
  • ок, тогда как мне можно сделать, чтоб блоку задавался размер картинки?
    – I. Gursky
    3 окт 2016 в 18:04
  • если Вам нужно, чтобы картинка не сжималась или растягивалась по блоку теряя внешний вид - поставьте ширину и высоту блока как у картинки, но это тупиковый ход, задайте размер блока как он есть и вместите картинку по блоку как я сказал. Или не используйте background, а задайте картинке position:absolute, а блоку - position:relative. (Плюс настройки картинки конечно: ширина: 100%; топ:0, лефт:0 и т.д.).
    – Ep1demic
    3 окт 2016 в 18:11
  • я использовал картинку (не бг) и теперь она не скейлится, не адаптивной получается ;C
    – I. Gursky
    3 окт 2016 в 18:45

2 ответа 2

1

Используйте:

background-size:100%;

или

background-size: cover; 
0

Как предложили

background-size: cover; 

Можете дополнить, также

background-position: center;

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.