css background order of properties All In One

css background order of properties All In One

background properties order bug

  .cat-top,
  .cat-bottom {
    width: 120px;
    height: 120px;    
    background-image: url('https://www.dropbox.com/s/mqapcs2hsf7k4yp/cat-expressions_03.png?dl=1');
    background-size: cover;
    background-position: center center;
  }

  .cat-top,
  .cat-bottom {
    width: 120px;
    height: 120px;    
    background: url('https://www.dropbox.com/s/mqapcs2hsf7k4yp/cat-expressions_03.png?dl=1') center center no-repeat;
  }

solution

  .cat-top,
  .cat-bottom {
    width: 120px;
    height: 120px;    
    background: url('https://www.dropbox.com/s/mqapcs2hsf7k4yp/cat-expressions_03.png?dl=1') center center / cover no-repeat;
    // background-image: url('https://www.dropbox.com/s/mqapcs2hsf7k4yp/cat-expressions_03.png?dl=1');
    // background-size: cover;
    // background-position: center center;
  }

position / size

url
position
size
repeat

refs

https://css-tricks.com/almanac/properties/b/background/

https://developer.mozilla.org/en-US/docs/Web/CSS/background

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---