SVG background image не отображается

Question

Я пытаюсь добавить SVG в качестве фонового изображения, и по какой-то причине он не отображается, и я не знаю, почему.

Вот SVG:

<svg viewBox="0 0 1000 100" preserveAspectRatio="none"> 
    <polygon points="0,0 1000,0 1000,50 0,50" style="fill:#01b6ef;" /> 
    <polygon points="0,0 500,0 0,100" style="fill:#222c37;" /> 
</svg> 

Вот CSS:

.head-nav{ 
    background-image: url("/media/images/header.svg"); 
    background-repeat: no-repeat; 
    height: 100px; 
} 

А вот HTML (с помощью CSS бутстрапе):

<div class="fluid-container head-nav"></div> 

Когда я смотрю на в заголовках хром они выглядят так (я также получаю 200 обратно):

Accept-Ranges:bytes 
Connection:keep-alive 
Content-Length:196 
Content-Type:image/svg+xml 
Date:Sun, 14 Dec 2014 15:46:10 GMT 
ETag:"548daee8-c4" 
Last-Modified:Sun, 14 Dec 2014 15:38:16 GMT 
Server:nginx/1.4.6 (Ubuntu) 

Когда я помещаю xml прямо в html, изображение отображается, но не как фоновое изображение. Какие-либо предложения?

Answer 1

Если у вас есть автономный файл SVG, который используется как image/svg + xml, он должен иметь правильные пространства имен или он не будет отображаться. html не имеет пространств имен, поэтому он работает, если вы вставляете SVG-данные непосредственно в html-файл.

Так что ваш файл SVG должен выглядеть следующим образом ...

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" preserveAspectRatio="none"> 
    <polygon points="0,0 1000,0 1000,50 0,50" style="fill:#01b6ef;" /> 
    <polygon points="0,0 500,0 0,100" style="fill:#222c37;" /> 
</svg> 

Если бы вы попытались отобразить автономный файл сразу, UA должен дать вам какое-то полезное сообщение.

Answer 2

Попробуйте добавить размер фона: содержать; к вашему классу .head-nav. SVG в качестве фона должен иметь размер фона, чтобы показать полное изображение.

Использование фона: содержать; вместо определенной высоты и ширины, он становится агностиком устройства.

Надеюсь, это сработает для вас.