Search code examples
cssbootstrap-5overlaycss-shapes

Multiple CSS Overlay shapes in Bootstrap

I am trying to create the css for my landing page like I have shown in the figma design. The page is built in bootstrap 5 (not sure if that matters). I know this is possible but i'm having a hard time determining how I need to go about doing it?

My initial plan was create 3 divs .Oval1 .Oval2 .Oval3 and then position them relatively and clip using overflow hidden. But when I adjust the size of the ovals it causes all the content in the col to grow larger.

I know this can be done to look very close to the design but I'm just not sure the best way to approach it. Thank you so much for all your help in advance.

Please see the screen shots. current html

FIGMA DESIGN

<div class="col-lg-6 d-flex align-items-center login_screen_img">
                    <div class="text-white px-3 py-4 p-md-5 mx-md-4">
                        <div class="oval1"></div>
                        <div class="oval2"></div>
                      <h4 class="mb-4">We are more than just a company</h4>
                      <p class="small mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                    </div>
                  </div>

  .col-lg-6.d-flex.align-items-center.login_screen_img {
    background-image: url(../img/login-pg-bg.png);
    background-position: 45% 36%;
    overflow: hidden;
}


/*shape overlays*/

.oval1 {
    position: relative;
    width: 319px;
    height: 187px;
    background: #4AC676;
    opacity: 85%;
    border-radius: 50%;
    bottom: -330px;
    left: -154px;
}

.oval2 {
    position: relative;
    width: 319px;
    height: 187px;
    background: #4AC676;
    opacity: 85%;
    border-radius: 50%;
    bottom: -120px;
    left: -100px;
}
Solution

  • I would use the <img> tag instead of the background-image CSS property. The goal can be achieved by setting position-absolute with position-relative, z-index, left and bottom.

    Use @media queries to set different sizes for green circles at different viewport sizes. Now it looks ugly on most viewport sizes, but at 810px (i.e., the viewport width I was using when writing the code for you), the following code looks like this:

    Screenshot

    Use @media queries to make it look similar on other viewport sizes.

    See the snippet below.

    .oval1 {
  position: relative;
  width: 650px;
  height: 650px;
  background: #4AC676;
  opacity: 85%;
  border-radius: 50%;
  bottom: -60%;
  left: -10%;
}

.oval2 {
  position: relative;
  width: 450px;
  height: 450px;
  background: #4AC676;
  opacity: 50%;
  border-radius: 50%;
  bottom: -40%;
  right: -100px;
}

.oval3 {
  position: relative;
  width: 250px;
  height: 250px;
  background: #4AC676;
  opacity: 25%;
  border-radius: 50%;
  bottom: 25%;
  right: -10%;
}
    <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Test title</title>

  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>

<body>
  <div class="row">
    <div class="col-lg-6 d-flex align-items-center position-relative overflow-hidden">
      <img class="w-100 object-fit-cover" src="https://www.thesafaricollection.com/wp-content/uploads/2022/07/The-Safari-Collection-Hey-You-Giraffe-Manor-1.jpg">
      <div class="oval1 position-absolute"></div>
      <div class="oval2 position-absolute"></div>
      <div class="oval3 position-absolute"></div>
      <div class="text-white px-3 py-4 p-md-5 mx-md-4 position-absolute left-0 bottom-0 w-50">
        <h4 class="mb-4">We are more than just a company</h4>
        <p class="small mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </div>
  </div>


  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>

</html>