Использование SVG в качестве фонового изображения

Question

Я не могу заставить это работать так, как хотелось бы.Моя страница меняет высоту в зависимости от того, какой контент загружен, и если требуется прокрутка, svg не растягивается ...

html {
  height: 100%;
  background-image: url(http://www.horizonchampion.eu/themes/projectbase/images/bg.svg);
  background-size: 100% 100%;
  -o-background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  background-size: cover;
}

<svg width="1024" height="800" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <radialGradient fy="0.04688" fx="0.48047" r="1.11837" cy="0.04688" cx="0.48047" id="svg_2">
                <stop stop-color="#ffffff" offset="0"/>
                <stop stop-opacity="0" stop-color="#eaeaea" offset="1"/>
            </radialGradient>
            <radialGradient fy="0.04688" fx="0.48047" r="1.71429" cy="0.04688" cx="0.48047" id="svg_5">
                <stop stop-color="#ffffff" offset="0"/>
                <stop stop-opacity="0" stop-color="#eaeaea" offset="1"/>
            </radialGradient>
         </defs>
         <g display="inline">
            <title>Layer 1</title>
            <rect fill="#eaeaea" stroke-width="0" x="0" y="0" width="1024" height="800" id="svg_1"/>
        </g>
         <g>
              <title>Layer 2</title>
              <rect id="svg_3" height="282" width="527" y="1" x="1" stroke-width="0" fill="url(#svg_2)"/>
              <rect id="svg_4" height="698" width="1021.99999" y="1" x="1" stroke-width="0" fill="url(#svg_5)"/>
         </g>
    </svg>

Возможно ли это сделать только с помощью CSS3?Я бы не хотел загружать другую библиотеку JS или звонить ... Есть идеи?Спасибо!

Answer 1

Вы можете попробовать удалить атрибуты width и height в корневом элементе svg, добавив вместо него preserveAspectRatio="none" viewBox="0 0 1024 800".По крайней мере, в Opera есть разница, если предположить, что вы хотите, чтобы svg растягивался, чтобы заполнить весь регион, определенный стилями CSS.

Answer 2

Попробуйте разместить его на body

body {
    height: 100%;
    background-image: url(../img/bg.svg);
    background-size:100% 100%;
    -o-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    background-size:cover;
}

Answer 3

Вы установили фиксированную ширину и высоту в вашем теге SVG. Это, вероятно, корень вашей проблемы. Попробуйте не удалять их и установите ширину и высоту (если необходимо), используя CSS вместо этого.