html - Smart background div with circle but what if is background-image -


i have div , span. span circle border added on it. div has simple background , move - top. if background isn't color , background-image how so.

sorry bad english

html

<div id="main">     <span class="circle"></span>     <div class="div">      </div> </div> 

css

#main {     text-align: center; }  .circle {     background: #298eea;     display: inline-block;     width: 80px;     height: 80px;     margin-top: 30px auto;     border-radius: 50%;     border: 15px solid #f3f5f6 }  .div {     padding: 80px 80px 60px 80px;     background: #282c39;     border-radius: 3px;     margin-top: -45px; } 

checkout jsfiddle

you may use pseudo element , use shadow draw background-color.

#main {    text-align: center;  }  html {    background: linear-gradient(45deg, white, gray, gold, purple, gray, white, gray, gold, purple, gray, white, gray, gold, purple, gray, white, gray, gold, purple, gray, white, gray, gold, purple, gray)  }  .circle {    background: #298eea;    display: inline-block;    position: relative;    width: 80px;    height: 80px;    margin: 15px auto 0;    border-radius: 50%;  }  .div {    padding: 80px 80px 60px 80px;    border-radius: 3px;    overflow: hidden;    position: relative;    margin-top: -45px;    z-index: 1;    color:white;  }  .div:before {    content: '';    height: 100px;    width: 100px;    position: absolute;    z-index: -1;    top: -50px;    left: 0;    right: 0;    margin: auto;    box-shadow: 0 0 0 1000px #282c39;    border-radius: 50%;  }
<div id="main">    <span class="circle"></span>    <div class="div">      test me    </div>  </div>


Comments

Popular posts from this blog

mysql - Dreamhost PyCharm Django Python 3 Launching a Site -

java - Sending SMS with SMSLib and Web Services -

java - How to resolve The method toString() in the type Object is not applicable for the arguments (InputStream) -