html – How to set 2 backgrounds with different positions?

Question:

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.

Answer:

The background property supports multiple values. For example:

 body { background: /* картинка справа без повторений */ url(https://i.stack.imgur.com/JFzjg.jpg) 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