Home/ Questions/Q 6840713
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T23:52:39+00:00

I’m trying to accomplish something like this with CSS3: Where the purple circle is

  • 0

I’m trying to accomplish something like this with CSS3:

enter image description here

Where the purple circle is the image and the less purple thing is the div background.

My first guess was negative padding but a quick search told me this isn’t allowed. Normal overflow doesn’t work because I want it to start above background as well as end below it. I’m pretty new to CSS so I don’t really know how this might be done.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Use relative positioning, top, and possibly left.

    position: relative;
top: -25px;
left: -15px;

    Relative Positioning was defined in CSS 2.0. Which means no CSS3 required and it will work on almost every browser, including mobile.

    You will also have to set the height and top margin for the div.

    Here is my test file and output.

    <html>
<head>
 <style type="text/css">
  .purpleRectangle{
   background: #b93b8f;
   height: 200px;
   margin-top: 30px;
  }
  img{
   position: relative;
   top: -25px;
   left: 15px;
  }
 </style>
</head>
<body>
 <div class="purpleRectangle">
  <img src="circle.png" />
 </div>
</body>
</html>

    enter image description here

    • 0