Here is the code I am working with: http://jsfiddle.net/uorto4ny/2/
The challenge I'm facing is trying to keep a fluid sized SVG centered on the page while maintaining its proportions. Currently, it works in Chrome, but in IE and Firefox, one side of the SVG becomes longer than the other, even though they should be equal.
Below is the CSS I am using:
* {
padding: 0;
margin: 0;
}
body {
font-family:"Helvetica Neue", Arial, Helvetica, sans;
background: #f4f4f4 url('http://www.clker.com/cliparts/c/H/Y/E/V/s/theta-400x400.svg') no-repeat center center fixed;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: 25% 25%;
}
a {
position: absolute;
bottom: 0;
right: 0;
margin: 0px 10px 10px 0px;
padding: 10px 18px;
text-decoration: none;
font-size: 12px;
text-align: center;
background-color: #FFF;
color: rgba(0, 0, 0, 0.44);
border-radius: 5px;
border: 1px solid rgba(0, 0, 0, 0.15);
transition: background-color 0.3s ease 0s;
}
a:hover {
background-color: rgba(87, 173, 104, 1);
border: 1px solid rgba(87, 173, 104, 1);
color: white;
}
If anyone can point out what I might be doing incorrectly, I would greatly appreciate it.
Sincerely, James