Match complex background images

Question

Suppose you have a layout like this:

To get a "pixel-perfect" match to the design, there are a couple of approaches:

• Keep the collage (with the woman with the phone) as an image, and torment yourself as you try to get the background images (the 'waves' or 'swooshes') aligned just right, knowing that any resize of the screen will likely throw it all off

• Turn the collage and swooshes into a single image and use that as the background (seems poor)

• ???

How do I match the design as closely as possible?

Answer 1

I would tell you what I would do to make this work. For this I will use Bootstrap to make it better on small screen devices too.

I would divide this entire thing into three blocks.

1. Contains the HTML (left side): Managing business text and buttons
2. Contains a static image of the woman with the phone
3. A background image with the wavy design.

Now take a div and apply the background image of the wavy design to it. Divide the content and woman with the image into separate divs that would hold each of the items. Now it will remain in the position, even though the screen size changes.

<div class="row m-0 p-0 main-parent-div" >
  <div class="col-12 col-xs-6 p-0">
    Managing Business
  </div>
  <div class="col-12 col-xs-6 p-0 image-div">
    <img src='image.jpg' alt='woman with phone' class="image" />
  </div>
</div>

CSS:

.main-parent-div {
  background-image: url('wavy-image.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}

/* Use this to control width and height */
.image-div {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Or contain, depending on the image */
}

/* Will keep the image responsive */
.image {
  width: 100%;
  height: auto;
}

Bootstrap margin padding

Grid - Row column