Html Question posted in
Some basic documentation can be found here.

Html – how do i align a div with an image with a wavy div

my orange div, receives a wavy background as the div’s background, but on top, I have another div that has an image, which should be pasted on it, but due to this waviness, it ends up being detached from the div, how can I solve this? I thought about using position: relative, but I don’t know if it’s the best way to solve this

I expected something similar to this

enter image description here

I have that

enter image description here

my wave background

enter image description here

.about-us-section {
  background: url("/assets/images/about-us-background.png") repeat-x;
  padding: 90px 0px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
<div class="main-section" id="home">
   <img
      class="person-image"
      src="/assets/images/person.png"
      alt="Imagem da Home"
      />
</div>

<div class="about-us-section" id="about-us">
   <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis facere
      velit repellat eligendi accusantium ratione doloribus, aliquid sapiente
      iste fuga ad totam deserunt temporibus commodi, dicta voluptas, at
      exercitationem necessitatibus?
   </p>
</div>
Tags:

2

Answers


  1. 0

    From what it looks like this your trying to put this at the bottom of your page, if that’s the case it might be easiest to put in your CSS the attribute position and assign it to absolute and then in the attribute bottom to 0px

    .wave { position: absolute;
        bottom: 0px;
      }
.background {  position: absolute;
              bottom: 0px;
             }
    <body>
<div class="background" style="background-color:blue; width: 100%; height:40px" >
</div>
<div class="wave" style="background-color:orange; width: 100%; height:10px" >
</div>
</body>

    hope this helps!

    Login or Signup to reply.
  2. 0

    Hi,

    You can use a simple trick witch is -margin. Important note: yours second div should have transparent background to allow first div background to show up.

    Solution

    I don’t have yours wavy div, so for this example I used a simple circle gradient background to show the purpose. You should adjust margin height at your own background.

    p {
  margin: 0;
}

.main-section {
  height: 200px;
  width: 400px;
  background-color: tomato;
}

.about-us-section {
  height: 200px;
  width: 400px;
  padding: 50px 0px;
  background-image: radial-gradient(goldenrod 200px, transparent 200px);
  margin-top: -20px;
}
    <div class="main-section" id="home">
   <img
      class="person-image"
      src="/assets/images/person.png"
      alt="Imagem da Home"
      />
   <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis facere
      velit repellat eligendi accusantium ratione doloribus, aliquid sapiente
      iste fuga ad totam deserunt temporibus commodi, dicta voluptas, at
      exercitationem necessitatibus?
   </p>
</div>

<div class="about-us-section" id="about-us">
   <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis facere
      velit repellat eligendi accusantium ratione doloribus, aliquid sapiente
      iste fuga ad totam deserunt temporibus commodi, dicta voluptas, at
      exercitationem necessitatibus?
   </p>
</div>

    Cheers

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search