Z index with background images through javascript

Question

I want to add background images with javascript, I did with element.style.backgroundImage but I want to do Z-index on it, I know it doesn't work with background images so i want to do it with the order, I want to initialize it then add an image with a higher "z-index", here's my function:

    function newBackGround (element,background, box) {
var current_image = element.style.backgroundImage;
if (current_image != ""){
    if (box.type != "normal") {
        element.style.backgroundImage = "url("http://placekitten.com/200/200")";
        element.style.backgroundImage = "url("http://placekitten.com/500/200"), url("http://placekitten.com/2089/458")";        }
    else{
        element.style.backgroundImage = "url("+background+")";
    }
}
else{
    element.style.backgroundImage = "url("+background+")";
}

My HTML(very short):

 <!DOCTYPE html>
     <head>
          <link rel='stylesheet' href="DouShouQui.css">
     </head>
     <body>
         <table>
              <tr>
                   <td></td>
              </tr>
         </table>
         <script src="DouShouQui.js"></script>
     </body>

and here's my css:

 td {
     border: 1px solid black;
     width: min(calc(30vw), calc(30vh));
     height: min(calc(10vw), calc(10vh));
     background-color: black;
     text-align: center;
     color: #FF9800;
     font-size: 100%;
     background-size: contain;
     background-position: center;
     background-repeat: no-repeat;
     position: relative;
 }

Box.type is initialized somewhere. And i can't use specific classes because i have 21 images but if there's something you can do with a few classes and javascript it's good. In the result it puts nothing, both images are not showed.

Please add a minimal reproducable example to your question (maybe with some "fake" images from picsum.photos). See stackoverflow.com/help/how-to-ask ... — biberman
– biberman, Commented Apr 18, 2021 at 16:00
This is the minimal reproducable example, I added fake images instead of a variable, I prefer not to short it more because some error might be related to everything — danny
– danny, Commented Apr 18, 2021 at 17:50
If you follow the link (minimal reproducable example) you will find in section Complete "Make sure all information necessary to reproduce the problem is included" and a link to the explanation of stack snippets (works like codepen or jsfiddle) -> In short: Your example is lacking html and css... — biberman
– biberman, Commented Apr 18, 2021 at 18:53
I know how to do Z-index but it doesn't work on background-images — danny
– danny, Commented Apr 19, 2021 at 18:07

danny · Accepted Answer · 2021-05-04 11:41:24Z

0

i figured it out: my problem was just that i took the current image and I added url() to it, if u want to change Z-index on javascript u can just do

    element.style.backgroundImage = "url("image will be displayed"), url("image will not be displayed except if you delete the first one")";

answered May 4, 2021 at 11:41

danny

729 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Z index with background images through javascript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related