Question

I know I can repeat a single background image in the y direction. But I want to repeat a few of them. I also want to resize them all so they fill the entire screen each. i.e. to give the effect of them being on top of each other.

I know I can use something like fullpage but I'd rather code it myself.

All I have is:

body {
       background: url("images/bg1.png");
       background-size: cover
}

Answer 1

Just add the image urls one after the other with their respective properties separated with a comma like this:

background: 
   url(1.png) 600px 10px no-repeat,
   url(2.png) 10px 10px no-repeat,
   url(3.png),
   url(4.png);
}

Answer 2

Here is an ugly example, however it shows a lot of different options:

body {
  background-image   : url(http://lorempixel.com/400/200/),
                       url(http://lorempixel.com/400/200/sports/),
                       url(http://lorempixel.com/400/200/sports/1/);

  background-repeat  : repeat-y,
                       repeat-x,
                       repeat-y;

  background-position: bottom right,
                       top left,
                       bottom left;
}

https://jsfiddle.net/DIRTY_SMITH/c7Lof03h/2/

Is it possible to have more than 1 background image repeat

2 个答案: