CSS фоновое изображение для жидких макетов

Question

Я пытаюсь применить background-image к элементу li.

<ul>
<li class="maintablink">&nbsp;</li>
</ul>

Мой CSS для того же -

li.maintablink{background:url(../images/tab_content.png) no-repeat left top;}

Даже добавляя некоторую ширину: 200px; высота: 200 пикселей выше, не работает.

Я использую HTML5 doctype

У меня есть 2 вопроса, связанных с этим;

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

2. Я использую текучую разметку (все в%, без значения px)... Так как мне дать ширину / высоту для этого фонового изображения ... Оно должно масштабироваться с размером браузера (я знаю, для изображений страниц мы используем img{max-width:100%}) ... Но как мне сделать фоновые изображениямасштабируемый?

Answer 1

Звучит так, как будто вы ищете свойство CSS background-size.

Для фона, который можно масштабировать в соответствии с размером контейнера:

background-size: auto;

Для фонаэто фиксированный размер, независимо от размера контейнера или фактического фонового изображения:

background-size: 150px 200px;

Вы также можете использовать проценты или ключевые слова contain или cover.

См. http://www.css3.info/preview/background-size/ для получения дополнительной информации.

Обратите внимание, что background-size имеет неплохую поддержку браузеров сейчас, но некоторые старые браузеры (в частности, IE8 и более ранние, но также Firefox 3.x)не поддерживают его.

Если вам требуется полная поддержка этих браузеров, вам необходимо разработать запасное решение (возможно, с использованием дополнительной разметки и / или Modernizr, чтобы определить, доступна ли эта функция).

Answer 2

Применение фонового изображения к элементу li

li не является элементом блока, поэтому вы должны изменить display:inline-block, прежде чем устанавливать ширину и высоту.

Существует возможность установить background-size в CSS , по которой можно перейти по этой ссылке , , Если вы не хотите показывать свой контент из элемента li , просто поставьте text-indent:-9999px вам li css.

Проверьте это демо для тестирования background-size