html – How to set 2 backgrounds with different positions?


Greetings! How can you make two backgrounds in one block with different positions? The first background is aligned to the right, without repetitions, and the second background-picture in the form of a slight gradient will be at the bottom of the block with repetitions horizontally.


The background property supports multiple values. For example:

 body { background: /* картинка справа без повторений */ url( right center / auto auto no-repeat fixed, /* небольшой градиент снизу с повторениями по горизонтали */ linear-gradient(to right, red 10px, yellow 20px, green 30px) left bottom / 40px 10px repeat-x; /* чисто для демонстрации, пусть страница занимает весь экран */ margin: 0; height: 100vh; }
Scroll to Top