CODEWITHSUNDEEP
htmlcsssvg
Ylama
Ylama

Reputation: 2489

Basic SVG background image size property

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

Upvotes: 3

Views: 17026

Answers (2)

Hash
Hash

Reputation: 8020

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)

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115045

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>

Upvotes: 10

Related Questions