SVG Hero Background Styled with CSS

This Row has an SVG Tiled Background Styled with CSS

This Row has an SVG Tiled Background Styled with CSS

This Row has an SVG Tiled Background Styled with CSS

.svg-bg-one {background-color: #4676b4;
background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 0C6.716 0 0 6.716 0 15c8.284 0 15-6.716 15-15zM0 15c0 8.284 6.716 15 15 15 0-8.284-6.716-15-15-15zm30 0c0-8.284-6.716-15-15-15 0 8.284 6.716 15 15 15zm0 0c0 8.284-6.716 15-15 15 0-8.284 6.716-15 15-15z' fill='%231f4678' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");}

SVG in CSS only

SVG Hero Background Styled with CSS

  1. Copy CSS from www.heropatterns.com
  2. Add CSS to style.css in your theme like the above example
  3. add the class, svg-bg-one for example to the Advanced tab of the row.

That's all that was done to add this row.

No need to download the SVG image file or install the plugin, SVG Support.