CODEWITHSUNDEEP
csssvgcross-browser
Richard B
Richard B

Reputation: 395

How to make background SVG stretch 100% with cross browser support?

Check out this pen in Chrome and then Firefox: http://codepen.io/richbrat/pen/fLdFw

In Chrome the SVG is scaling appropriately but not in Firefox. Why is that, has it got something to do with preserveAspectRatio in SVG?

The SVG is here: https://s3-us-west-2.amazonaws.com/s.cdpn.io/156826/bg.svg

Upvotes: 1

Views: 75

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 105903

For this effect that you look for, a linear background could be used as well :

background: #e8f5fa linear-gradient(to bottom right, transparent 51%, #DAEAF3 50%) ;

For the background-size, it can be written this way too: background: #e8f5fa url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/156826/bg.svg') no-repeat 0 0 / 100% 100%;

Upvotes: 2

Peh
Peh

Reputation: 78

Check out CSS

background-size: 100% 100%;

Take a look at Browser compatibility: http://caniuse.com/#search=background-size

Upvotes: 2

Related Questions