CODEWITHSUNDEEP
htmlcsslayoutpixel-perfect
user
user

Reputation: 97

Match complex background images

Suppose you have a layout like this:

Enter image description here

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

How do I match the design as closely as possible?

Upvotes: -4

Views: 76

Answers (1)

Sandeep M
Sandeep M

Reputation: 350

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

Upvotes: 0

Related Questions