Как задать 2 фона с разным раположением?

332

07 августа 2017, 10:01

Приветствую! Как можно сделать два фона в одном блоке с разным расположением? Первый фон выравнивается по правой стороне, без повторений, а второй фон-картинка в виде небольшого градиента будет снизу блока с повторениями по горизонтали.

Answer 1

Свойство background поддерживает несколько значений. К примеру:

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; 
}