Skip to content

Instantly share code, notes, and snippets.

@coulterpeterson

coulterpeterson/procedure.md

Last active July 13, 2021 18:34
Show Gist options
  • Save coulterpeterson/ecb282b5bedfa268734fddb38f4b4ce4 to your computer and use it in GitHub Desktop.
Save coulterpeterson/ecb282b5bedfa268734fddb38f4b4ce4 to your computer and use it in GitHub Desktop.
Download ZIP
How to make an SVG stretchable/scalable like a PNG background in CSS
Raw
procedure.md

Source: https://stackoverflow.com/a/56459700

  • remove the width and height properties ex: width="375" height="137"
  • add this property preserveAspectRatio="none"
  • add the viewbox property (containing your original width and height that you just removed viewBox="0 0 375 137"

In your css file on the element that contains your svg background:

  • add the property: background-size: 100% 100%;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment