Basic SVG background image size property - html

Question

I wish i never had to ask this but im confused.
So i have a basic background image on my div and for some reason when i set the background-size: 246px 70px; it does not work, only if i use !important it works.
.footer div.image-logo {
height: 70px;
width: 246px;
background-size: 246px 70px;
background-position: center;
background: url(/images/svg/five_Logo.svg) no-repeat;
margin: 20px auto;
}
Now basically you would think other css is overwriting it, well thats my rookie thought but it is not, when i inscpect the div with the background image, and click the tab "computed" to check the current state of the background-image-size it says background-size:auto;, and when i click on this to see where it gets the property auto it shows 246px 70px style.css?ver=1.0.5:2266 .footer div.image-logo which is the css where i set my background size to background-size: 246px 70px;.
I would like to be able to set the background size without using !important

Answer 1

The background shorthand includes background-size:auto and this is overriding your previous background-size statement.
Put the background-size statement after the background shorthand statement.
div {
width: 400px;
height: 300px;
margin: 1em auto;
}
.one {
background-size: 200px 100px;
background: url(http://www.placebacon.net/400/300) no-repeat; /* I win */
}
.two {
background: url(http://www.placebacon.net/400/300) no-repeat;
background-size: 200px 100px; /* I win */
}
<div class="one"></div>
<div class="two"></div>

Answer 2

Syntax is;
background-image
background-position
background-size
background-repeat
background-attachment
background-origin
background-clip
background-color
Ex:
body {
background-image: url(photo.jpg);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-origin: padding-box;
background-clip: border-box;
background-color: #ccc;
}
Therefore you might want to re-order. (Clear cookies as well)