Multiple background images CSS

1

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 :

body{
  background-image: 
    url(https://loff.it/wp-content/uploads/2018/03/loffit-the-macallan-50-anos-200-botellas-a-razon-de-28-500-euros-cada-una-01.jpeg),
    url(https://daman.co.id/daman.co.id/wp-content/uploads/2019/07/Screen-Shot-2019-07-25-at-10.03.44-AM.png);
  background-position: top, bottom;
  font-family: 'Literata', serif;

Link to my project : https://codepen.io/Nalid/pen/abvZOjJ

2

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
3

Thanks @jjberg83 !!

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

4

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:

5

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