<!doctype html> <meta charset=utf-8> <style> .bgsvg { background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 32'%3E%3Crect x='0' y='16' width='16' height='16' fill='purple'/%3E%3C/svg%3E") no-repeat; background-size: contain; width: 100px; height: auto; margin: auto; position: relative; } .bgsvg::after { content: ' '; display: block; padding-bottom: 200%; } </style> <div class="bgsvg"></div>