I have two images, one rectangle and one circular. The rectangle image needs to be positioned 10em lower due to a banner image at the top. Half of the circle should overlap with the rectangle while the other half remains outside. The center of the circle must align somewhat close to the midpoint of the baseline of the rectangle.
After that, there is a lot of text on the page. Therefore, the circle's positioning should be relative to the rectangle only, not to the rest of the content on the page. How can I achieve this using CSS? This div appears directly above the image.
If I wrap it in a div or section, it interferes with the layering. What am I overlooking? (Keep in mind that only CSS and HTML can be used)
<style type="text/css">
#outer{
position:fixed;
top:12em;
left:0;
width:80%;
height:400px;
margin-left:10%;
margin-right:10%;
background-image: url(SOMEURL);
}
#inner{
width: 300px;
height: 300px;
top: 300px;
margin: 0;
position: relative;
background-image: url();
background-size: cover;
display: block;
border-radius: 300px;
-webkit-border-radius: 300px;
-moz-border-radius: 300px;
}
</style>
<center>
<div id=outer class="rectangle-Image-bg">
<div id=inner >
</div>
</div>
<div>Some text here
<div>
</center>