How do I scale an SVG background-image without honoring aspect ratio in Firefox?

Question

I've got a CSS background-image set on an element of fluid height and width. It's an SVG, and the intended behavior is for it to stretch in whatever directions necessary to cover the entirety of the element's area. In Chrome, Safari, and even bad ol' Internet Explorer 9, the scaling works how I want:

But within Firefox (both desktop and mobile), the output is more like this:

After some digging around, it appears Firefox tends to be stricter about SVG rendering than other browsers, in that it closely adheres to the most recent version of the spec. (Opera Mini also fails rendering this background image (when enabled) in that it doesn't scale the image down, and given the Presto engine's tradition of tackling specs with the earnestness of a summer thunderstorm, it may expect the same updated approach that Firefox does.)

You can see the live page I'm working on at http://ti.gt/. I've also provided the code I'm working with below:

HTML

<h1 class="blog-title-wrapper">
  <a href="/" class="blog-title pop-out">{Title}</a>
</h1>

CSS

.blog-title {
    background: none;
    color: #fff;
    font: normal normal 4em "Alternate Gothic", sans-serif;
    margin: 0 0 0 .1em;
}

.blog-title-wrapper {
    margin: -1px 0 0 0;
    padding-bottom: 20%;
    background: #d23e2c;
    background: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxMzMzIDc1MCIgdmVyc2lvbj0iMS4xIj48cGF0aCBkPSJtIDAsMCAxMzMzLDAgMCwzMjAuNTMgLTcyLjY3LDQ4LjQyIDUyLjQ1LDM3LjU3IC0xMjYuMzEsNTIuODQgNTAuMTMsMTM2LjE5IC0xOS45OCwzNy4yNiAtMzkuNDcsLTExLjcxIC0zOC43NSw0MC40NyAtNjMuMzIsLTEyLjA3IC0zMC40NCwtMTM1LjYgLTcuOTQsMy4yOCAyNC43NCwxNDAuOTUgLTM4LjEzLDMwLjI2IC00NC4zNSwtMy4zMyAtMzUuODMsMjMuMzkgLTQ4LjkzLC0xMy4yMiAtMzguMjQsLTE0MS40OCAtMTAuNTcsMy42OCA2LjIsMTQ4Ljk3IC0zMy44OCwyMC40NiAtMjUuMjYsLTEzLjg1IC0yMi40OCwzMS40OSAtMjcuMzYsLTIyLjMyIC0zMiwyNC4zNCBMIDY4MC41NSw3MTguNiA2NjQuNyw1NjQgbCAtMTcuMDgsMC45MSAtMjEuODgsMTU5LjczIC0yOS4xNywyNS4zNiAtMS43MiwwIC0yNy44NCwtMjMuMDIgLTIzLjMsMTMuODggLTIxLjYsLTIwLjcxIC0yMi4zMSwxMS4yMSAtMjQuMTMsLTIzLjE4IDEwLjE0LC0xNTUuNCAtNC43NywtMi4yIC0zMy42NCwxNTcuNjMgLTI5Ljk3LDE0LjIxIC04LjgsLTEuMTcgLTM1LjIxLC0yMC4zOCAtMzQuMTcsMTAuNDEgLTguNjMsLTIuNzkgLTMyLjkzLC0yNi42OCAyNC45NiwtMTUxLjU0IC0xMC42NiwtMi4wOSAtNDUuNjIsMTQwLjM0IC0zMi40OSwxNS4zMyAtNTUuMDgsLTQwLjM2IC0zOC45OSw5LjA3IEwgMTA2LjgyLDYxOC40MyAxNTMuMjYsNDg2LjA2IDguODUsNDI4LjU3IDYzLjkzLDM4MC44NiAwLDMzMy4wNSB6IiBmaWxsPSIjZDIzZTJjIi8+PHBhdGggZD0iTSAzMDIuNzYsMzQuNTggNDY0Ljk4LDE1OC45MyA0MjMuMDcsMzY3LjM3IDI3Ny4yNywyODQuMjIgMTgxLjc5LDMzMi42NiA4MS41NywxNDMuMDggeiIgZmlsbD0iI2E4MzEyMyIvPjxwYXRoIGQ9Im0gMTA3OC45Miw0MC4xMSAxOTYuOSw3Ny44NCAtMTA5Ljk5LDI1My4wNyAtMTAzLjg5LC02MC4wNyAtMTUuMzcsMS45IC0xMTkuMDUsNDkuMjIgLTI1LjQ3LC0yMjcuMzQgeiIgZmlsbD0iI2E4MzEyMyIvPjxwYXRoIGQ9Im0gNjA1LjY1LDMyMi43NCAzLjYsMTA3LjE5IC0xMDAuNzYsMS41NyA2NC41OSwtMzMuMzggeiIgZmlsbD0iI2E4MzEyMyIvPjxwYXRoIGQ9Im0gNzE4LjUxLDMyNS4zIDMzLjMzLDc3LjAyIDc5LjQxLDI4LjI3IC0xMTkuOSwxOS40OSB6IiBmaWxsPSIjYTgzMTIzIi8+PC9zdmc+") no-repeat 100% 100%, none;
}

The Data URI doesn't appear to be the sticking point, but here's the decoded SVG file:

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" width="100%" height="100%" viewBox="0 0 1333 750" version="1.1">
    <path d="m 0,0 1333,0 0,320.53 -72.67,48.42 52.45,37.57 -126.31,52.84 50.13,136.19 -19.98,37.26 -39.47,-11.71 -38.75,40.47 -63.32,-12.07 -30.44,-135.6 -7.94,3.28 24.74,140.95 -38.13,30.26 -44.35,-3.33 -35.83,23.39 -48.93,-13.22 -38.24,-141.48 -10.57,3.68 6.2,148.97 -33.88,20.46 -25.26,-13.85 -22.48,31.49 -27.36,-22.32 -32,24.34 L 680.55,718.6 664.7,564 l -17.08,0.91 -21.88,159.73 -29.17,25.36 -1.72,0 -27.84,-23.02 -23.3,13.88 -21.6,-20.71 -22.31,11.21 -24.13,-23.18 10.14,-155.4 -4.77,-2.2 -33.64,157.63 -29.97,14.21 -8.8,-1.17 -35.21,-20.38 -34.17,10.41 -8.63,-2.79 -32.93,-26.68 24.96,-151.54 -10.66,-2.09 -45.62,140.34 -32.49,15.33 -55.08,-40.36 -38.99,9.07 L 106.82,618.43 153.26,486.06 8.85,428.57 63.93,380.86 0,333.05 z" fill="#d23e2c"/>
    <path d="M 302.76,34.58 464.98,158.93 423.07,367.37 277.27,284.22 181.79,332.66 81.57,143.08 z" fill="#a83123"/><path d="m 1078.92,40.11 196.9,77.84 -109.99,253.07 -103.89,-60.07 -15.37,1.9 -119.05,49.22 -25.47,-227.34 z" fill="#a83123"/>
    <path d="m 605.65,322.74 3.6,107.19 -100.76,1.57 64.59,-33.38 z" fill="#a83123"/>
    <path d="m 718.51,325.3 33.33,77.02 79.41,28.27 -119.9,19.49 z" fill="#a83123"/>
</svg>

I've tried a variety of tactics to get Firefox to accept my demands, but so far not a one has been successful. I've looked over this document that's about exactly this topic, but I'm unable to extract any advice from it.

Meister

Answer 1

I needed to set the background-size. This snippet did the trick:

background-size: 100% 100%;

Part of the "stricter rendering model" was deferring sizing information to the page, rather than intrinsically within the SVG.

I thought I was defining this inside the background shorthand, but apparently instead I was specifying the background-position. I feel pretty silly about that, but it does appear to be the gnarliest and most-overgrown shorthand in CSS.

Meister

Answer 2

This problem is solved since eight years, but just for the case somebody comes here with the same problem, in the meantime there is one more reason why Firefox might not respect the size, even if background-position is set:

If the ratio of width and height of the image shall be a different one than defined in the svg file, then

preserveAspectRatio="none"

must be defined in the root <svg ...> node.

See here and look for preserveAspectRatio.

Macfarlane

Answer 3

Note ... you might be better off not using the base64 encoded version of the background ... as so:

.blog-title {
    background: none;
    color: #fff;
    font: normal normal 4em "Alternate Gothic", sans-serif;
    margin: 0 0 0 .1em;
}

.blog-title-wrapper {
    margin: -1px 0 0 0;
    padding-bottom: 20%;
    background: #333;
    background-size: 100% auto;
    background-image: url("data:image/svg+xml;charset=UTF-8, %3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1333 750'%3E%3Cpath fill='%23d23e2c' d='M0 0h1333v320.5l-72.7 48.4 52.5 37-126.3 53 50 136-20 37-39.3-12-38.8 40.4-63.3-12-30-135.7-8 3 25 141-38 30.3-44-3-36 23.4-48.7-13-39-141-10.5 3.6 6.2 149-34 20.5-25-14-22.7 31-27.3-22-32 24-30-28L665 563l-17 1-22 159.4-29 25.4h-2l-28-23-23.3 14-21.7-21-22 11.6-24-23.4 10-155-4.8-2.2-33.6 158-30 14.2-8.8-1-35.2-20.5-34 10.2-8.8-3-33-27 25-151.7-10.6-2-45.6 140-32.6 16-55.2-40.5-39 9-33-34 46.5-132L8.8 429l55-47.8L0 333z'/%3E%3Cpath fill='%23a83123' d='M302.8 34.6L465 159l-42 208.4-145.7-83.2-95.5 48.5L81.6 143zM1079 40l196.8 78-110 253-104-60-15.2 1.8-119 49.3L902 135zM605.6 322.7l3.6 107.2-100.7 1 64.5-33zm113 2.6l33.2 77 79.5 28.3-120 19.5z'/%3E%3C/svg%3E");
}

<h1 class="blog-title-wrapper">
  <a href="/" class="blog-title pop-out">{Title}</a>
</h1>

Gorizia

Oh, I think I might agree. ;) I can update my example if it's bothering you. – Meister

;) no worries ... hadn't looked at the date on the original ask when I posted this (the question had been surfaced to the main home page) I think base64 may have been a better way back in 2014. You might like this uri encoding tool I made ... any comments to improve would be appreciated. – Gorizia