Menu
I'm using an svg image as a background. I'm trying to use CSS3's background-size: 100% 100%; but it doesn't seem to work, even in browsers which should support it (like Chrome).
If you look at this site you'll see the #special-post article (to the right/below the food image) with a red banner-looking background. Notice that as you shrink the window down, the height of the background image drops to retain it's proportions, rather then stretching, as I would like.
EDIT: I checked this on FireFox and it works correctly... so this appears to be a webkit issue.
EDIT: I checked this on Safari and it works! So it looks like my problem is specific to Chrome.
(PS: I'm familiar with this alternative solution, using an img tag, but I'd rather not use it.)
628
Here's how to create responsive background images with CSS: Use the background-size property to encompass the viewport. Give this property a cover value that will tell a browser to scale the background image's heights and width so that they always remain equal to or greater than the height/width of the device viewport.
When you work with background images, you may want an image to stretch to fit the page despite the wide range of devices and screen sizes. The best way to stretch an image to fit the background of an element is to use the CSS3 property, for background-size, and set it equal to cover.
There are four different syntaxes you can use with this property: the keyword syntax ("auto", "cover" and "contain"), the one-value syntax (sets the width of the image (height becomes "auto"), the two-value syntax (first value: width of the image, second value: height), and the multiple background syntax (separated ...
As of March 2016, Background sync is available in Chrome from version 49 and above.
Here's a workaround:
Open your .svg file, find the <svg> tag at the beginning and add the following property inside it:
preserveAspectRatio="none" Source: http://www.yootheme.com/support/question/6801?order=modified
168
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
