Question 45932 in CSS Question posted in
Some basic documentation can be found here.

Two image split screen – CSS

I have two images that I want to split and display without doing a ton of photoshopping. I want the left 50% of the first photo and the right 50% of the second photo with a dashed line in between them. How can I do this in CSS?enter image description here

Tags:

2

Answers


  1. 0

    Have 2 div’s with background image as wanted image. Set second element background image to be right aligned:

    .wrapper {
  width: 500px;
}

.el {
  width: 50%;
  background-repeat: no-repeat;
  background-position: center left;
  background-size: cover;
  height: 200px;
  display: inline-block;
  box-sizing: border-box;
}

.first {
  background-image: url(https://placehold.co/500x200?text=LEFT);
}

.second {
  background-image: url(https://placehold.co/500x200?text=RIGHT);
  border-left: 2px dashed red;
  background-position: center right;
}
    <div class="wrapper">
  <div class="el first"></div><div class="el second"></div>
</div>
    Login or Signup to reply.
  2. 0

    Use this code to create Two image split screen

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Two image split screen</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .container {
            display: flex;
            width: 100%;
            height: 100vh;
            overflow: hidden;
        }

        .image-half {
            position: relative;
            width: 50%;
            height: 100%;
        }

        .image-left {
            background-image: url('https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cHJvZmlsZSUyMGltZ3N8ZW58MHx8MHx8&w=1000&q=80');
            background-position: left center;
            background-size: cover;
        }

        .image-right {
            background-image: url('https://images.unsplash.com/photo-1532074205216-d0e1f4b87368?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80');
            background-position: right center;
            background-size: cover;
            border-left: 2px dashed #000;
        }
    </style>

</head>

<body>
    <div class="container">
        <div class="image-half image-left"></div>
        <div class="image-half image-right"></div>
    </div>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search