The problem is this: two background-pictures are not on the same line. How to fix it?

#img { background-position: left; vertical-align: middle; display: inline-block; padding: 0px; width: 348px; height: 286px; margin: 0px; background: url(el1.png) no-repeat; } #img1 { background-position: right; vertical-align: middle; display: inline-block; padding: 0px; width: 348px; height: 286px; margin: 0px; background: url(el2.png) no-repeat; } 
 <div id="img"></div> <div id="img1"></div>

It is necessary that the first remained in place on the left side of the screen, and the second was on the right side of the screen.

  • At you 2 times property display is described, so should be? - Specter
  • I removed and nothing has changed, so this is something else ... - Kamilplus
  • background-position to help you - Specter
  • for some reason, no changes ((can check? I don’t know what to remove and what to change - Kamilplus
  • So this is solved with the help of float!) - Dmitriy

2 answers 2

Try using ordinary pictures instead of background , applying different z-index to them.

    Unload CSS.

     .flex { justify-content: space-between; display: -webkit-flex; width: 100%; position: relative; } #img, #img1 { display: inline-block; } 
     <div class="flex"> <div id="img"></div> <div id="img1"></div> </div>