April 18, 2020, 2:25am
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 :
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:
background-position: left top, left bottom;
background-repeat: no-repeat, no-repeat;
April 18, 2020, 3:56pm
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
April 20, 2020, 9:01am
The order of the listed background images determines the position of the layer relative to the viewer, akin to the CSS z-index property.