0

What is the best way to handle background images with unconventional shapes at the bottom? Here's an example: enter image description here

The second background image does not look good and has a white space. Should I cut the first background image like that or should I retain the rectangle shape and do the shape on CSS?

Here's also another one: enter image description here

How do I make it look like it's stacked? I'm using tailwind CSS and here's what I've done so far:

<div class="bg-first-section bg-cover bg-bottom"></div>
<div class="bg-second-section bg-cover bg-center"></div>

<style>
.bg-first-section {
    background-image: url('image');
}

.bg-second-section {
    background-image: url('image');
}
</style>

Please advice. Thanks a ton.

user3233787
  • 379
  • 1
  • 10
  • 32
  • I think that the best way to handle that is to use a transparent png for the top image. – Eolo Jul 19 '23 at 14:33
  • in addition to the duplicates, check this: https://css-generators.com/section-divider/ / https://css-generators.com/wavy-shapes/ – Temani Afif Jul 19 '23 at 15:13

0 Answers0