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?

This is the subject of [a meta question](https://meta.stackexchange.com/questions/388962/how-can-i-find-out-why-my-comments-were-deleted-on-my-question). — Peter Mortensen, May 07 '23 at 10:19
[Why is asking a question on "best practice" a bad thing?](https://meta.stackexchange.com/q/142353/266284) [Strategy for “Which is better” questions](https://meta.stackexchange.com/q/204461) [How much research effort is expected of Stack Overflow users?](https://meta.stackoverflow.com/q/261592/3404097) PS Putting words in scare quotes does not clarify the idiosyncratic meaning that you don't make clear by actually saying what you mean. — philipxy, May 08 '23 at 03:07

score 0 · Accepted Answer · edited May 07 '23 at 10:27

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.

Contains the HTML (left side): Managing business text and buttons
Contains a static image of the woman with the phone
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

Match complex background images

1 Answers1