# Bakgrunder

Exempel på en blå bakgrund med arena-streck.

[![bg-svg.png](https://rfdesign.xbm.se/uploads/images/gallery/2026-03/scaled-1680-/bg-svg.png)](https://rfdesign.xbm.se/uploads/images/gallery/2026-03/bg-svg.png)

### Använda som bakgrund

Man väljer själv beroende på sammanhang om man använder svg inbäddad i sidan, eller hänvisar till en svg-fil som ligger på annan plats.

#### Fil att ladda ner

- [bg-svg.svg](https://rfdesign.xbm.se/attachments/4) - bakgrunden med blå färg

#### Bädda in svg

Och här är svg-koden för samma bakgrund. När koden är inbäddad har man inga externa beroenden. Notera att färgkoden för `fill` är det som ger den blå bakgrunden. Den färgen går alltså att byta ut mot andra färger i RF:s palett för en annan färg på bakgrunden men samma linjer. Den här koden går att kopiera in i en textfil som man sedan sparar med filändelsen .svg - man får då en egen SVG-bild för bakgrunden.

`\<!-- RF brand SVG – full-bleed background, decorative -->  <svg class="bg-svg" aria-hidden="true" focusable="false"       xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"       viewBox="0 0 1919 1237" preserveAspectRatio="xMidYMid slice">    <defs>      <path id="a" d="M.992.136h837.681v1355.79H.992z"/>      <path id="c" d="M1.774 1.304h368.062v462.03H1.774z"/>      <path id="e" d="M1.774 1.462h407.039v458.185H1.774z"/>      <path id="g" d="M1.774.845h431.318v992.592H1.774z"/>      <path id="i" d="M1.774.603H487.07V1002.95H1.774z"/>      <path id="k" d="M1.774 1.205h1138.862v500.35H1.774z"/>    </defs>    <rect width="1919" height="1237" fill="#006bb1"/>    <g fill="none" fill-rule="evenodd" opacity=".8">      <g transform="translate(1079.573 -87.52)">        <mask id="b" fill="#fff"><use xlink:href="#a"/></mask>        <path stroke="#FFF" stroke-width=".5" d="M140.573 135.487C140.573 58.375 78.081-4.138.992-4.138m233.492 139.625C234.484 6.492 129.946-98.08.992-98.08m327.4 233.568c0-180.874-146.583-327.502-327.4-327.502m421.304 327.502c0-232.752-188.622-421.436-421.304-421.436m515.213 421.436c0-284.633-230.67-515.373-515.213-515.373m609.12 515.373C610.112-201.025 337.4-473.82.992-473.82m703.025 609.307c0-388.39-314.757-703.244-703.025-703.244M843.635 523.17c-77.09 0-139.584 62.513-139.584 139.625m139.584-233.566c-128.957 0-233.496 104.57-233.496 233.566m233.496-327.502c-180.82 0-327.402 146.628-327.402 327.502m327.402-421.437c-232.685 0-421.307 188.684-421.307 421.437m421.307-515.37c-284.545 0-515.214 230.738-515.214 515.37M843.635 53.488c-336.41 0-609.12 272.797-609.12 609.307m609.12-703.242c-388.27 0-703.028 314.853-703.028 703.242m563.437-527.349v1264.74m-93.955-1264.74v1265.777M516.137 135.446v1264.74m-93.955-1264.74v1265.777M328.227 135.446v1264.74M234.273 121.355v1279.868M140.318 135.446v1265.777m563.437-735.766H140.318M694.362 886.93h-74.531m-19.374 0h-74.536m-93.902 0h74.532m-168.441 0h74.536m-168.44 0h74.533m-168.44 0h74.533" mask="url(#b)"/>      </g>      <path stroke="#FFF" stroke-width=".5" d="M484.017 152.947v1001.8m.08.107c276.512 0 500.669-224.06 500.669-500.448 0-276.391-224.157-500.448-500.67-500.448m0 0c-8.718 0-17.382.223-25.991.663"/>      <g transform="translate(-1 165.57)">        <mask id="d" fill="#fff"><use xlink:href="#c"/></mask>        <path stroke="#FFF" stroke-dasharray="11.105,11.105" stroke-width=".5" d="M369.836 1.304C156.789 51.536-3.724 237.79-14.945 463.334" mask="url(#d)"/>      </g>      <g transform="translate(-1 689.413)">        <mask id="f" fill="#fff"><use xlink:href="#e"/></mask>        <path stroke="#FFF" stroke-dasharray="10.749,10.749" stroke-width=".5" d="M-14.248 1.462c16.943 233.875 194.58 423.21 423.06 458.185" mask="url(#f)"/>      </g>      <g transform="translate(-1 158.737)">        <mask id="h" fill="#fff"><use xlink:href="#g"/></mask>        <path stroke="#FFF" stroke-width=".5" d="M407.057.845c-4.173.653-8.33 1.36-12.468 2.115M-15.416 482.803a518.625 518.625 0 0 0-.01 24.885M420.933 992.03c4.038.515 8.092.984 12.16 1.408" mask="url(#h)"/>      </g>      <g transform="translate(-1 151.904)">        <mask id="j" fill="#fff"><use xlink:href="#i"/></mask>        <path stroke="#FFF" stroke-width=".5" d="M459.137 1002.287c8.598.44 17.253.663 25.96.663M485.017.603h-1017.43M487.069 1002.845H-530.362" mask="url(#j)"/>      </g>      <g transform="translate(-1 766.85)">        <mask id="l" fill="#fff"><use xlink:href="#k"/></mask>        <path stroke="#FFF" stroke-width=".5" d="M1140.636 31.435H-553.453m1694.09-30.23v60.46m0 148.91h-1694.09m1694.09-30.23v60.461m0 148.913h-1694.09m1694.09-30.23v60.46m0 148.91h-1694.09m1694.09-30.23v60.461m0 148.91h-1694.09m1694.09-30.23v60.46m0 148.911h-1694.09m1694.09-30.23v60.461m0 148.911h-1694.09m1694.09-30.23v60.46" mask="url(#l)"/>      </g>    </g>  </svg>`

### HTML för att sätta bakgrundsbild

Här är exempel på hur bilden kan sättas som bakgrund. Denna svg är särskilt lämpad eftersom den har `preserveAspectRatio="xMidYMid slice"` och en `viewBox`.

`<html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Page title</title>  <style>    body {      margin: 0;      min-height: 100vh;      background-image: url('bg-svg.svg');      background-size: cover;      background-position: center;      background-repeat: no-repeat;      background-attachment: fixed; /* optional: keeps it fixed while scrolling */    }  </style></head><body>  \<!-- your content here --></body></html>`

</body></html>