2013-03-23 2 views
0

Проблема с div, которая покрывает 90% экрана и показывает фоновое изображение. CSS:Установите фоновое изображение для портретного экрана

div.invite-bg { 
    background-image:url('../img/b1g.jpg'); 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: 92em 52em; 
    display: compact; 
    width: 100%; 
    height: 90%; 
    position: absolute; 
    top: 10%; 
    left:0; 
} 

Это высота не работает в портретном экране iPad или iPhone. как я могу это исправить?

ответ

1

Вы можете попробовать отрегулировать размер фона либо cover, либо contain.

Более подробную информацию можно найти here.

+0

background-size: крышка дала лучший результат, но осталось еще несколько пикселей высоты. –

+0

Вы уверены, что это не потому, что 'height' установлен на' 90% 'и' top' до '10%' – bukka

+0

У меня есть панель навигации сверху и снизу - это div. top: 10% для подгонки изображения в остальной части экрана, иначе он перекрывался с фоном навигационной панели. –

1

Вы используете display: compact, который заставляет меня думать, что вы получаете ситуацию, когда элемент отображается как встроенный элемент. Попробуйте изменить его, чтобы отобразить: block;

Элемент, использующий дисплей: compact, может быть показан как встроенный или блочный элемент в зависимости от следующего элемента.

+0

Пробовал с дисплеем: блок. Без изменений :( –

+0

Хорошо, стоило попробовать. Обычно, когда высота не дает никакого эффекта, это потому, что элемент встроен, а не блокирован. Может появиться что-нибудь еще, но увидел небольшую ошибку на последней строке, слева: 20, отсутствует единица после 20. Однако я не думаю, что это поможет. – user1823799

+0

Хорошая уловка. Опечатка –

Смежные вопросы