Размер фона: 100% 100%; не работает должным образом в Chrome

Я использую изображение svg в качестве фона. Я пытаюсь использовать CSS3 background-size: 100% 100%;, но он не работает, даже в браузерах, которые должны его поддерживать (например, в Chrome).

Если вы посмотрите на этот сайт, вы увидите #special-post article (справа/ниже изображения пищи) с красным баннерный фон. Обратите внимание: когда вы уменьшаете окно вниз, высота фонового изображения падает, чтобы сохранить его пропорции, а не растягивать, как хотелось бы.

EDIT: Я проверил это на FireFox, и он работает правильно... так что это проблема Webkit.

EDIT: Я проверил это на Safari, и он работает! Поэтому похоже, что моя проблема специфична для Chrome.

(PS: Я знаком с этим альтернативным решением, используя тег img, но я бы предпочел не использовать его.)

Ответ 1

Здесь обходной путь:

Откройте файл .svg, найдите тег <svg> в начале и добавьте в него следующее свойство:

preserveAspectRatio="none"

Источник: http://www.yootheme.com/support/question/6801?order=modified

Ответ 2

Оказывается, это известная ошибка в Chrome, которая специфична для фоновых изображений svg. Я бегу v 17.0.963.56, в случае, если кто-то заботится, и вы можете отслеживать ошибку здесь.

Ответ 3

background-size: cover

Работает по всем направлениям. Протестировано с помощью Safari, Chrome и FF.

Ответ 4

Это все еще проблема в Chrome 39, но не в Firefox. Я столкнулся с этим при масштабировании фонового SVG:

background-image: url(bg.svg);
background-repeat: repeat-x;
background-size: 1200px auto;

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

background-size: auto auto;

Не так много решений, чтобы не масштабировать свой фон, но все же.