Skip to content

SVG into CSS background image

Jump to bottom
Ben Forbes Griffith edited this page Mar 8, 2024 · 3 revisions

🛠 CONVERTERS 🔃

  • When using the tool below to convert SVG code into Data URI, follow these tips for best results…
  1. Optimize your SVG code to take out unnecessary code as well as keep your CSS shorter. Here is a guide to SVG Optimization.
  2. Remove commented‑out code before inserting your code.
  3. When using the “legacy browser support” option, CSS classes won’t work within URL‑encoded data URIs, so you should replace classes with the direct use of SVG attributes, such as fill='#F00' When you use an SVG as a background image in CSS, there’re a few CSS properties that’ll help position＆size the background design as desired. Learn how to add SVGs as CSS backgrounds.

🛠 SVG to CSS converter 🔃

This tool converts SVG code into a Data URI, which is an encoded URL format that can be used as a background-image source; essentially, this conveniently converts SVG code directly into CSS and thus avoids any need for uploading image files, cutting down on the number of server requests!

🛠 SVG “OMG” optimizer 📉

CSS background-image properties꞉

After you place your file “path” or SVG code into the background-image property, you can further tweak how the background displays. Indeed, and important advantage of using an SVG as a CSS background-image is that it can be styled with CSS background properties…

Background-attachment꞉

  • Example values꞉ scroll; fixed; local;

The attachment specifies how the background moves relative to the user’s screen; when the user scrolls, the background can scroll along with a given section, or stay put (fixed).

Background-position꞉

  • Example values꞉ center; top left; 50% 50%; right 30px bottom 15px;

The background-position determines where the image is displayed within its container; the center keyword is great for large backgrounds or for making patterns symmetrical. With smaller backgrounds, one might use a combination of keywords＆lengths to place the background image more precisely.

Background-size꞉

  • Example values꞉ cover; contain; 500px 250px; auto;

This controls how large or small the image displays; a value of cover forces the image to fill its entire containing element in proportion, and either the excess width or height will get clipped — whereas a value of contain is similar in that it fills its container in proportion, but without clipping. A specific width＆height value may also be provided.

Background-repeat꞉

  • Example values꞉ no-repeat; repeat; repeat-x;

The background-repeat property allows tiling the background image into a pattern.

Background-color꞉

  • Example values꞉ red; #F00; rgb(0,255,165);

SVGs are a transparent image format, so if the SVG elements don’t cover the entire viewBox, the background color will be visible behind your SVG.

Background-origin꞉

  • Example values꞉ border-box; padding-box; content-box;

The origin determines the boundary of the background’s container… border-box will stretch the background area for the entire container, while the padding-box and content-box values shrink the background area within the border or inside the padding, respectively.

Background-clip꞉

  • Example values꞉ border-box; padding-box; content-box;

Similarly to background-origin, this property defines the background area, but with one key difference꞉ the background doesn’t resize, but instead crops the background image to fit within the assigned boundary.

Background-blend-mode꞉

  • Example values꞉ multiply; screen; overlay, color-dodge, color;

This property blends the colors of the target background with what is visible behind the target element, blending into a single colorful result… These blend modes are essentially a browser version of Photoshop’s blending modes!

Layering multiple background images!

“Background-image” can hold multiple background image layers to achieve impressive effects. To create these image layers, comma-separate each image value in a single background-image property. Then when you use any related background properties, comma‑separate those varied values to coincide with the images, or instead use a single value which will apply to all images the same.

background-image:
  url( '/path/image-1.svg' ),
  url( '/path/image-2.svg' ),
  url( '/path/image-3.svg' );

You can mix images, SVG data URIs, and CSS gradients, but must overlap images with transparency or take advantage of the background blending mode previously discussed; otherwise, you’ll only see one background, which will be the first image on top of the background stack.

<div id="multi-bg"> </div>
<style>
   #multi-bg{
      height: 300px;
      display: block;
      background-color: #808;
      background-image:
         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cpolygon fill='%23cc3f47' points='957 450 539 900 1396 900'/%3E%3Cpolygon fill='%23b3373e' points='957 450 872.9 900 1396 900'/%3E%3Cpolygon fill='%23c8364e' points='-60 900 398 662 816 900'/%3E%3Cpolygon fill='%23b02f44' points='337 900 398 662 816 900'/%3E%3Cpolygon fill='%23c22f55' points='1203 546 1552 900 876 900'/%3E%3Cpolygon fill='%23ab294b' points='1203 546 1552 900 1162 900'/%3E%3Cpolygon fill='%23bb285c' points='641 695 886 900 367 900'/%3E%3Cpolygon fill='%23a52351' points='587 900 641 695 886 900'/%3E%3Cpolygon fill='%23b32362' points='1710 900 1401 632 1096 900'/%3E%3Cpolygon fill='%239f1f57' points='1710 900 1401 632 1365 900'/%3E%3Cpolygon fill='%23aa2068' points='1210 900 971 687 725 900'/%3E%3Cpolygon fill='%23971c5d' points='943 900 1210 900 971 687'/%3E%3C/svg%3E"),
         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 160 80'%3E%3Cg fill='%23FFF' fill-opacity='0.2'%3E%3Cpolygon points='0 10 0 0 10 0'/%3E%3Cpolygon points='0 40 0 30 10 30'/%3E%3Cpolygon points='0 30 0 20 10 20'/%3E%3Cpolygon points='0 70 0 60 10 60'/%3E%3Cpolygon points='0 80 0 70 10 70'/%3E%3Cpolygon points='50 80 50 70 60 70'/%3E%3Cpolygon points='10 20 10 10 20 10'/%3E%3Cpolygon points='10 40 10 30 20 30'/%3E%3Cpolygon points='20 10 20 0 30 0'/%3E%3Cpolygon points='10 10 10 0 20 0'/%3E%3Cpolygon points='30 20 30 10 40 10'/%3E%3Cpolygon points='20 20 20 40 40 20'/%3E%3Cpolygon points='40 10 40 0 50 0'/%3E%3Cpolygon points='40 20 40 10 50 10'/%3E%3Cpolygon points='40 40 40 30 50 30'/%3E%3Cpolygon points='30 40 30 30 40 30'/%3E%3Cpolygon points='40 60 40 50 50 50'/%3E%3Cpolygon points='50 30 50 20 60 20'/%3E%3Cpolygon points='40 60 40 80 60 60'/%3E%3Cpolygon points='50 40 50 60 70 40'/%3E%3Cpolygon points='60 0 60 20 80 0'/%3E%3Cpolygon points='70 30 70 20 80 20'/%3E%3Cpolygon points='70 40 70 30 80 30'/%3E%3Cpolygon points='60 60 60 80 80 60'/%3E%3Cpolygon points='80 10 80 0 90 0'/%3E%3Cpolygon points='70 40 70 60 90 40'/%3E%3Cpolygon points='80 60 80 50 90 50'/%3E%3Cpolygon points='60 30 60 20 70 20'/%3E%3Cpolygon points='80 70 80 80 90 80 100 70'/%3E%3Cpolygon points='80 10 80 40 110 10'/%3E%3Cpolygon points='110 40 110 30 120 30'/%3E%3Cpolygon points='90 40 90 70 120 40'/%3E%3Cpolygon points='10 50 10 80 40 50'/%3E%3Cpolygon points='110 60 110 50 120 50'/%3E%3Cpolygon points='100 60 100 80 120 60'/%3E%3Cpolygon points='110 0 110 20 130 0'/%3E%3Cpolygon points='120 30 120 20 130 20'/%3E%3Cpolygon points='130 10 130 0 140 0'/%3E%3Cpolygon points='130 30 130 20 140 20'/%3E%3Cpolygon points='120 40 120 30 130 30'/%3E%3Cpolygon points='130 50 130 40 140 40'/%3E%3Cpolygon points='120 50 120 70 140 50'/%3E%3Cpolygon points='110 70 110 80 130 80 140 70'/%3E%3Cpolygon points='140 10 140 0 150 0'/%3E%3Cpolygon points='140 20 140 10 150 10'/%3E%3Cpolygon points='140 40 140 30 150 30'/%3E%3Cpolygon points='140 50 140 40 150 40'/%3E%3Cpolygon points='140 70 140 60 150 60'/%3E%3Cpolygon points='150 20 150 40 160 30 160 20'/%3E%3Cpolygon points='150 60 150 50 160 50'/%3E%3Cpolygon points='140 70 140 80 150 80 160 70'/%3E%3C/g%3E%3C/svg%3E"),         
         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpolygon fill='%23740074' points='1600 160 0 460 0 350 1600 50'/%3E%3Cpolygon fill='%235f005f' points='1600 260 0 560 0 450 1600 150'/%3E%3Cpolygon fill='%234b004b' points='1600 360 0 660 0 550 1600 250'/%3E%3Cpolygon fill='%23360036' points='1600 460 0 760 0 650 1600 350'/%3E%3Cpolygon fill='%23220022' points='1600 800 0 800 0 750 1600 450'/%3E%3C/g%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: bottom center, 50%, 50%;
   }
</style>
  • This technique prevents the need to layer <div> containers to achieve a layered effect.

vobis omnibus gratias ago propter rem in 🪧 Expositum Fragmenta 🧱

This 📒 “documentum 📜 fragmenta” 🧩 Wiki offers supplemental guidance＆documentation regarding some of what this project has to offer in terms of substantive code examples — in addition to assorted other hopefully useful or insightful references, tips, or otherwise informative snippets which in some way pertain to the craft of web‑development…

Clone this wiki locally