Сделать фоновое изображение div отзывчивым и его содержимое слишком

Я пытаюсь воссоздать панель опыта Minecraft в HTML, до сих пор мне удалось получить фоновой отзывчивость, но я не могу заставить работать панель «cover». Когда я делаю это min-height: 100% вместо 15px он вообще не отображается.Сделать фоновое изображение div отзывчивым и его содержимое слишком

.xpbar { 
    width: 0%; 
    height: 15px; /* works */ 
    /* min-height: 100%; doesn't work */ 
    background-image: url(http://i.imgur.com/4esnIWF.png); 
    background-repeat: no-repeat; 
    background-size: cover; 
}

Вот то, что я до сих пор:

http://jsfiddle.net/zLwds/2/

Изменение размера окна, чтобы увидеть проблему!

TL; DR Как я могу сделать второе изображение отзывчивым?

источник

2013-12-05 Vilarix

Так только пользователи Minecraft должны знать, что вы пытаетесь сделать? –

Извините, я должен был объяснить. Это похоже на индикатор выполнения, фон + передний план с шириной%! – Vilarix

Попробуйте это:

background-size: 100% 100%;

Это то, что вы пытаетесь достичь?

jsFiddle here

источник

2013-12-05 23:57:57 SquareCat

Спасибо! Я бы предпочел, чтобы панель обложки изменилась, как фоновый план (коэффициент сохранения), но она по-прежнему работает. – Vilarix

Странный - соотношение кажется прекрасным, когда я пробую его здесь, в Safari. – SquareCat

Это то, что у меня есть в Firefox: http://i.imgur.com/3inWyRI.png – Vilarix

Сделать фоновое изображение div отзывчивым и его содержимое слишком

ответ

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