mardi 21 avril 2015

Div background replicate body

I'm trying to achieve what is displayed in this image: http://ift.tt/1EmGhBI

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:

<div class="d1">
  <div class="d2">Some info in the circle</div>
</div>

CSS:

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;
}

Aucun commentaire:

Enregistrer un commentaire