CODEWITHSUNDEEP
htmlcss
TimSch
TimSch

Reputation: 1462

CSS - How to properly add 3 images in 3 layers

I have three layers of images. ( https://jsfiddle.net/zaqu4qja/1/ )

The main problem is that the mountains should be fixed on the bottom but they are floating over the page depending on the screen size.

The second problem is that I'm not the best with css and I would appreciate any advise to improve the css code.

The regarding code for the mountains: 

#foreground-mountains {
position: absolute;
z-index: 10;
bottom: 0;
left: 0;
background-size: cover;
width: 100vw;
background: url("/img/multiplikationsdreiecke/Vordergrund-Berge.png") no-repeat;
}

@media only screen and (min-width: 1024px) {
#foreground-mountains {
width: 100%;
height: 250px;
   }
}

Upvotes: 0

Views: 494

Answers (1)

GuCier
GuCier

Reputation: 7405

You can put this alltogether :

  • You can stack multiple images, colors and gradients in the backgroundproperty
  • You can define multiple background sizes separated with commas (just keep the declared backgrounds order) 

body {
  height: 100vh;
  background:
    url("https://s7.postimg.cc/nz903xrjv/Vordergrund-_Berge.png"),
    url("https://s7.postimg.cc/6yq3v96sr/Pyramide.png"),
    url("https://s7.postimg.cc/wu9ueft6z/Hintergrund.png");
  background-repeat: no-repeat;
  background-position: bottom center;
  /* Adjust to your needs */
  background-size: contain, 300px, cover ;
}

Upvotes: 2

Related Questions