Лучший способ сделать фон с помощью CSS?

Question

Мне было интересно, что будет лучшим способом создать полосу фона в макете сайта?

Подход, который приходит на ум, состоит в том, чтобы создать абсолютный позиционный div с z-индексом -1 и отрегулировать top / height, чтобы соответствовать заданному макету.

Это хороший способ?Или есть лучший способ?

Спасибо за любую помощь!: D

Answer 1

Элемент div с изображением, размещенным за содержимым, вероятно, является наилучшим способом создания масштабирующего фона.

Я думаю, что CSS3 также поддерживает фоновое масштабирование , но это не поддерживается широко.

Answer 2

Более семантическим подходом было бы применить фоновую полосу к элементу на странице - в нашем примере это элемент «слайд-шоу». Внешнее ограничение этого элемента (будь то div, ul или что-то еще) может затем быть растянуто до 100% ширины страницы, а содержимое элемента центрировано (или расположено по желанию).

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

Фоновое масштабирование может решаться несколькими способами:

1. Сделайте свой фон достаточно большим, чтобы это никогда не было проблемой.
2. Использовать фон в виде плитки.
3. Использовать свойство CSS3 background-size. Здесь приведен пример jsfiddle. ( Не поддерживается в <= IE8 </a>, но при небольшом творческом потенциале может ухудшиться изящно.)
4. Поместите изображение внутри вашего div (или аналогичного), а затем используйте CSS, чтобы позиционировать абсолютно, установите z-index для принудительного размещения под контентом и растяните изображение до ширины и высоты элемента. Вот пример jsfiddle. (Примечание: НЕОБХОДИМЫЙ! Уменьшает удобство обслуживания и т. Д. Но имеет лучшую поддержку, чем CSS3 background-size ...)

Answer 3

Количество сайтов, которые «обманывают»: на фоновом изображении сайта уже есть полоса

Это просто и безболезненно, но статично.