SVG as background Image, cross browser compatibili

Question

While using SVG as background image, if I need to fit the image correctly, then have to specify separate background positions for different browsers.

Is it the way I experienced, or I am doing something wrong.

The CSS I am trying to use:

.some {
  background: transparent url('some.png') no-repeat -X1px -Y1px;
  background: rgba(0,0,0,0) url('some.svg') no-repeat -X2px -Y2px;
  width: 53px;
  height: 14px;
  position: relative;
  top: 13px;
  left: 30px;
}

Answer 1

How are you trying to apply your background image to your html document?

It should just work if you use:

background-cover:cover;

not sure why you would position the BG like that.

http://www.css3.info/preview/multiple-backgrounds/

Answer 2

To scale your svg background, you can use:

background-size: 53px 14px;