SVG as CSS background

by katalin_2003

HTML

SVG images used as background:
<div>
<a href="/" style="text-align: center;">&nbsp;&nbsp;Home&nbsp;&nbsp;</a>
<a href="/">Section 1</a>
<a href="/">Section 2</a>
<a href="/">Contact us</a>
</div>
<p>
Same SVG image included as an image:
<br/>
<img src="http://helephant.com/wp-content/uploads/2009/08/svg-css-background.svg" width="200" height="50"/>
</p>

CSS

a {
  background-image:url(http://helephant.com/wp-content/uploads/2009/08/svg-css-background.svg);
  color:#EFEFEF;
  display:inline-block;
  font-size:15px;
  margin:0 1px 0 0;
  padding:10px 15px;
  text-decoration:none;
}
a:hover {
  position:relative;
  top:2px;
}