z-index in multiple background-image | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 2

z-index in multiple background-image

Problem: In the case of backgrounds with multiple images, the order of overlap is given by the order of writing the CSS code (the first written image is the image above). If we want to change the order of the image overlay, then we change the order of writing the code. BUT all property values ​​(size, positioning, etc.) must be reversed / modified, which is quite difficult. There is a more elegant solution, such as "z-index: 2, 3, 1" etc? (google translate) https://code.sololearn.com/WsoZx34YY267/?ref=app Problema: In cazul fundalurilor cu multiple imagini, ordinea de suprapunere este data de ordinea scrierii codului CSS (prima imagine scrisa este imaginea de deasupra). Daca vrem sa modificam ordinea suprapunerii imaginilor, atunci modificam ordinea scrierii codului. NUMAI CA in acest trebuie inversate/modificate toate valorile proprietatilor (marime, pozitionare etc), ceea ce este destul de greu. Nu exista vreo solutie mai eleganta, de tipul "z-index: 2, 3, 1" etc ? (google translate)

6th Feb 2020, 2:38 AM
Apologetica911
Apologetica911 - avatar
4 Answers
+ 5
Use shorthand property background, so that you can move all properties in one copy-and-paste action. like this: https://code.sololearn.com/We3b4Jh0f1Mp/?ref=app note that - background-color may only be included in last layer specified - background-size must only be included immediately after background-position. Reference : Mozilla Doc https://developer.mozilla.org/en-US/docs/Web/CSS/background
6th Feb 2020, 3:36 AM
Gordon
Gordon - avatar
+ 3
Yes, the order is still firstly written url goes upper (analogous to higher z-index), but with shorthand you can move the whole set of values in one move. About the sequence within same set of properties, just two points to note, which i have listed in my previous answers.
6th Feb 2020, 4:09 AM
Gordon
Gordon - avatar
0
Thank you! But it was not the main problem: that with changing the order of the layers through a simple / easy "z-index" type thing.
6th Feb 2020, 3:54 AM
Apologetica911
Apologetica911 - avatar
0
Now I realize! It's about moving within the CSS code, not just the "url" value, but the whole package of values, written short. Thank you very much! 3(google translate)
6th Feb 2020, 4:03 AM
Apologetica911
Apologetica911 - avatar