CODEWITHSUNDEEP
jquerycsssvg
tetris
tetris

Reputation: 4362

svg pattern on background image

Is it possible to put a .svg pattern as a background image, the svg pattern should be resized to the window width and height.

Upvotes: 1

Views: 721

Answers (1)

SpliFF
SpliFF

Reputation: 38976

It's possible but limited in browser support. Webkit tends to have the best SVG support and IE the worst. You can assign it using CSS and the CSS3 background-size property.

body {
  background: url(bg.svg) no-repeat;
  background-size: 100%;
  -o-background-size: 100%;
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
}

You can wrangle a bit more support by putting the SVG in an <img> and absolutely positioning and stretching it behind your content. This works because IE historically has more support for SVG as an <img> or <object> than as a CSS resource.

Upvotes: 1

Related Questions