How can I put a decorative img underneath a text?-CodePudding

  <div > 
    <div >
      <img src="IMG ASSETS/Ellipse 6.png">
      <h3>Events</h3>
      <p>
        If we're gonna walk though the <br> woods, we need a little path. We'll <br> paint
        one happy little tree right here. <br />
        There's not a thing in the world wrong <br> with washing your brush. Don't
        fiddle <br> with it all day.
      </p>
   
    </div>

how do I make it so my ellipse is positioned like the photo

CodePudding user response：

As @Cbroe mentioned, You can set position:relative to the parent, and position:absolute to your ellipse, and then set top, left, bottom or right.

Also, you can make an ellipse in css to avoid loading an image

body{
  background-color:#f8e68b;
}
.firstContent{
  width: fit-content;
  margin-left:100px;
  
  position:relative;
}
h3{
  text-align:center;
  color:#45597e;
}
.firstContent:before{
  content:"";
  background-color: #ecd03e;
  height: 150px;
  width: 160px;
  border-radius: 50%;

  position:absolute;
  top:-20px;
  left:-20px;
  z-index:-1;
}

<div >
  <h3>Events</h3>
  <p>
    If we're gonna walk though the <br> woods, we need a little path. We'll <br> paint
    one happy little tree right here. <br />
    There's not a thing in the world wrong <br> with washing your brush. Don't
    fiddle <br> with it all day.
  </p>
</div>

Note that instead of adding br in your text, you could set the width or max-width of your paragraph.

CodePudding user response：

Set position:relative on .firstContent then use position:absolute on your ellipse. Use the left and top rules to position the element where you want it to go. I've replaced the image with a div as I don't have your source but you get the general idea.

.firstContent {
  position: relative;
  isolation: isolate;
  background-color: #f9e78b;
  width: 30ch;
  padding: 4rem 2rem;
}
h3 {
  margin-left: 5ch;
  font-size: 1.5rem;
  color: #4e538a;
}

.circle {
  position: absolute;
  z-index: -1;
  width: 150px;
  height: 150px;
  left: 16px;
  top: 56px;
  border-radius: 1000px;
  background-color: #ecd03e;
}

<div > 
    <div >
      <div class='circle'></div>
      <h3>Events</h3>
      <p>
        If we're gonna walk though the <br> woods, we need a little path. We'll <br> paint
        one happy little tree right here. <br />
        There's not a thing in the world wrong <br> with washing your brush. Don't
        fiddle <br> with it all day.
      </p>
   
    </div>