CODEWITHSUNDEEP
htmlcsscss-shapes
Bogdan Iulian Bursuc
Bogdan Iulian Bursuc

Reputation: 2275

Div background replicate body

I'm trying to achieve what is displayed in this image: https://i.sstatic.net/siroQ.jpg

The body will have the big colored background and the little circle must be transparent and have the same background position as the body. Even if the circle is inside another div with another background. The background doesn't have to be transparent, but should look like.

Dunno even if this is possible at all. My solution so far is for the circle to use the same background and reposition the background with minus values depending of the circle div position in the parent. All worked fine if the body bg would be simple set, but I need the body background-size: cover;

The HTML:

body {
  height: 100%;
  background: url(../img/bg.jpg) no-repeat;
}
.d1 {
  background: #000;
  position: absolute;
  top: 200px;
  left: 500px;
  width: 200px;
  height: 200px;
}
.d2 {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 2px solid #fff;
  text-align: center;
  color: #fff;
  font-size: 20px;
  overflow: hidden;
  background: url(../img/bg.jpg) no-repeat;
  background-position: -500px -200px;
}
<div class="d1">
  <div class="d2">Some info in the circle</div>
</div>

Upvotes: 1

Views: 812

Answers (3)

Chris Spittles
Chris Spittles

Reputation: 15359

You could try something like this. Just set the background of the body and the background image of each circle.

body {
background: url(http://maryschuler.com/wp-content/gallery/april08/univexpansion.jpg) no-repeat center center;
background-size: 100% 100%;
margin: 12.5%;
}
.circle {
border-radius: 50%;
border: solid 2px #fff;
width: 100%;
padding-top: 100%;
height: 0;
position: relative;
}
.circle .region {
border-radius: 50%;
border: solid 2px #fff;
width: 25%;
padding-top: 25%;
height: 0;
background: url(http://maryschuler.com/wp-content/gallery/april08/univexpansion.jpg) no-repeat center top;
background-size:  100vw;
position: absolute;
clip-path: rect(10px, 20px, 30px, 40px);
}
.circle .north {
top: -12.5%; 
left: 50%;
margin-left: -12.5%;
}
.circle .east {
top: 50%;
right: -12.5%;
margin-top: -12.5%;
background-position: right center;
}
.circle .south {
bottom: -12.5%; 
left: 50%;
margin-left: -12.5%;
background-position: center bottom;
}
.circle .west {
top: 50%;
left: -12.5%;
margin-top: -12.5%;
background-position: left center;
}
<div class="circle">
    
    <div class="region north"></div>
    <div class="region east"></div>
    <div class="region south"></div>
    <div class="region west"></div>       
    
</div>

Although this is a rather crude method, you could investigate clip-path as a way of clipping a shape.

For more information on clip-path see this excellent article on CSS Tricks.

Upvotes: 2

Aramil Rey
Aramil Rey

Reputation: 3475

As Chris said, but just repeat a class and use ID's and background-color: transparent!

JSFiddle - DEMO

CSS

body {
    background: linear-gradient(to right, red , blue);
    margin: 12.5%;
}
.circle {
    border-radius: 50%;
    border: solid 2px #fff;
    width: 25%;
    padding-top: 25%;
    height: 0;
    background-color: transparent;
    position: absolute;
}
#big {
    width: 100%;
    padding-top: 100%;
    position: relative;
}
#north {
    top: -12.5%; left: 50%;
    margin-left: -12.5%;
}
#east {
    top: 50%; right: -12.5%;
    margin-top: -12.5%;
}
#south {
    bottom: -12.5%; left: 50%;
    margin-left: -12.5%;
}
#west {
    top: 50%; left: -12.5%;
    margin-top: -12.5%;
}

HTML

<div class="circle" id="big">        
    <div class="circle" id="north"></div>
    <div class="circle" id="east"></div>
    <div class="circle" id="south"></div>
    <div class="circle" id="west"></div>               
</div>

EDIT: I see the problem of using transparent background now. Trying to solve it.

Upvotes: 1

tomekwi
tomekwi

Reputation: 2168

Why not use transparent background?

.d2 {
  background: transparent;
}

You can just as well leave it out – as transparent is the default value for background.

Upvotes: 1

Related Questions