html - How to set two images beyond another one image? -
i want set 2 images beyond 1 image. please find below image trying fix. couldn't reach solution.
.main { border: 1px solid black; background-color: white; padding: 10px 10px 10px 10px; width: 1100px; height: 100%; margin: auto; } .container-fluid { background-image: url("bluescreen1.png"); background-size: 100% 15%; background-repeat: no-repeat; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <body class="main"> <div class="container-fluid"> <div class="row" style="z-index: 1;"> <div class="col-sm-12"> <img src="http://u.realgeeks.media/legacyplusrealty/email.jpg"> </div> </div> <div class="row"> <div class="col-sm-4"> some text </div> <div class="col-sm-4"> <img src="http://u.realgeeks.media/legacyplusrealty/email.jpg" alt="paris" style="width: 100%; height:320px; "> </div> <div class="col-sm-4"> <img src="http://u.realgeeks.media/legacyplusrealty/email.jpg" alt="paris" style="width: 100%; height:320px; z-index: -100;"> </div> </div> </div> </body>
i want above format of design. blue color image shows beyond 2 images. couldn't it. please review , guide me...
add position:relative;
every img z-index works positioned elements
Comments
Post a Comment