Title: Resize svg image as background in chrome browser
Tags: html;css;google-chrome;svg
Question: I am using svg image as background and I am stretching SVG image through background-size. I want it to be strech only width wise. Its working perfectly fine in firefox, IE9 + but chrome. Please suggest me how i can achieve it.

```.homecallouts ul li {
background-image: url('blue_arow_callout.svg');
background-size: 100% 100%;
width: 21%;
height: 42px;
```

see the jsbin code
http://jsbin.com/uvijuc/4/

when i resize in firefox only width stretch but in chrome both width and height are stretching. I want only width to stretch.

Comment: possible duplicate of [background-size:100% 100%; doesn't work properly in Chrome](http://stackoverflow.com/questions/9334095/background-size100-100-doesnt-work-properly-in-chrome)


Here is another answer: Maybe adding preserveAspectRatio="none" to open  tag in the SVG file could help?

```<?xml version="1.0" encoding="utf-8"?&gt;
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --&gt;
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="282.05px" height="61.974px" viewBox="286.287 26.514 282.05 61.974" enable-background="new 286.287 26.514 282.05 61.974"
     xml:space="preserve" preserveAspectRatio="none"&gt;
<polygon fill="#0063AF" points="538.337,26.514 286.287,26.514 316.287,57.5 286.287,88.488 538.337,88.488 568.337,57.5 "/&gt;
</svg&gt;
```

JSBin example

Comment for this answer: Ilya Streltsyn i love you...seriously you probably just saved my live, thank you so much!!!

Here is another answer: It's a Chrome bug. Regression, in fact.

http://code.google.com/p/chromium/issues/detail?id=113414

Comment for this answer: In may case, though, setting `preserveAspectRatio="none"` did help.

Here is another answer: I do not have enough reputation to upvote or comment, so only answering it again will work. I solved a similar case by just adding  preserveAspectRatio="none".

```<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="591.42859"
height="250.24918"
id="svg2"
version="1.1"
preserveAspectRatio="none"
inkscape:version="0.48.2 r9819"
sodipodi:docname="background.svg"&gt;
```


Here is another answer: I think technically chrome is correct on this one, you need to adjust your background-size values to what you actually want. Keeping them at 100% is forcing the aspect ratio to remain constant.

Comment for this answer: Would be helpful if your answer contained the code to make it the way the OP wants.
Comment for this answer: I have specified 42px hight and background-size height also 100% so why height is stretching. oh the other hand firefox is working what i desired.

Here is another answer: Don't use background-size.  What you need to do is have the following values for width, height and preserveAspectRatio in your SVG file.

```<svg width="100%" height="100%" preserveAspectRatio="xMidYMid slice" viewBox="..." /&gt;
```

Note that in order for this to work, your SVG needs to have a valid viewBox as well.  Which it does appear to do.


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 5, 'CommentCount': 1, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2013:00:07/05/13', 'FavoriteCount': 6.0, 'PostTypeId': 1, 'Tags': '<html><css><google-chrome><svg>', 'Title': 'Resize svg image as background in chrome browser', 'ViewCount': 4904, 'id': 17491654, 'user_AboutMe': '<p>Sr. Front End (full-stack JavaScript) developer with 9 years of experience designing, developing, implementing and maintaining user interfaces with accessible, responsive and scalable capabilities.</p>\n', 'user_AccountId': 2910391.0, 'user_DisplayName': 'PRAH', 'user_Reputation': 674.0, 'user_Views': 144.0, 'user_id': 2494776.0}}