Какие CSS свойства отвечают за этот код?

Question

[Дамир]

Добрый день, увидел в одном файле CSS код, следующего содержания:

background: url('image.png') no-repeat 50% 50px/500px auto;

Скажите плз что он означает, а конкретно меня смутило вот это:
50% 50px/500px auto
Слэш зачем там стоит?
Спасибо!

Answer 1

[alex]

это:

background: url('image.png') no-repeat 50% 50px/500px auto;

тоже самое что и это:

background-image: url('image.png');
background-repeat: no-repeat;
background-position: 50% 50px;
background-size: 500px auto;

https://webref.ru/css/background
https://www.youtube.com/watch?v=3gvjDqhYJ60

Comments

[Дамир]

спасибо большое а слэш там зачем?

[alex]

Дамир: он нужен чтобы разделять background-position и background-size
например вы можете написать так:background: 50% 20% 10px;
в этом случае браузеру будет не понятно какие значения к какому свойству относятся, может вы хотели так:

background-position: 50%;
background-size: 20% 10px;

или так:

background-position: 50% 20%;
background-size: 10px;

чтобы браузер понял писать нужно так:

background: 50%/20% 10px;
/*или так*/
background: 50% 20%/10px;

подробнее тут

[Дамир]

супер!