Multiple background images CSS

Hi all !

I’m building this product landing page from the Responsive Web Design Projects and I would like to put two images following each-other on the background (when the first image end, the second follow) then there is no repetition of the same image.

I try different way to do it but it’s not working…

My code so far :

  background-position: top, bottom;
  font-family: 'Literata', serif;

Link to my project :

Hi @Nalid,

It seems you have to add “left/right” to the background-position, and specify the background-repeat (more information here). Try adding this code instead:

body {
  background-position: left top, left bottom;
  background-repeat: no-repeat, no-repeat;
1 Like

Thanks @jjberg83 !!

It works !
But I don’t understand why the “left”

I guess the browser needs to have one coordinate for the horizontal positioning as well. But that´s just a guess. As long as it works, I´m satisfied :laughing:

The order of the listed background images determines the position of the layer relative to the viewer, akin to the CSS z-index property.

1 Like