CODEWITHSUNDEEP
css
Andrew Howard
Andrew Howard

Reputation: 3092

Vertically align a radial gradient

I've setup the following jsfiddle = https://jsfiddle.net/gfxjwuao/

.skeleton-yqjgac1o2g6:empty {
  height: 133px; 
  background-color: red; 
  border-radius: 0px 0px 0px 0px; 
  background-image: radial-gradient( circle 20px at 20px 20px, #F5F7F9 19px, transparent 20px );
  background-repeat: repeat-y;
  background-size: 40px 133px;
  background-position: center center;
}
<div class="skeleton-yqjgac1o2g6"></div>

All I want to do is vertically align the circle. I can horizontally center it all fine, but it just seems to ignore it vertically. Any ideas?

Using background-position: center center is ignored.

Upvotes: 1

Views: 117

Answers (2)

jonascotch
jonascotch

Reputation: 36

Tried it like this, changing the coordinates of radial-gradient to "center":

.skeleton-yqjgac1o2g6:empty {
  height: 133px; 
  background-color: red; 
  border-radius: 0px 0px 0px 0px; 
  background-image: radial-gradient( circle 20px at center, #F5F7F9 19px, transparent 20px );
  background-repeat: repeat-y;
  background-size: 40px 133px;
  background-position: center center;
}
<div class="skeleton-yqjgac1o2g6"></div>

Just a noob, though. Can't really explain it.

Upvotes: 2

dotsinspace
dotsinspace

Reputation: 691

Just change background-image radial graidient y to 50%. or just copy paste answer below and look for reasoning by yourself. :)

.skeleton-yqjgac1o2g6:empty {height: 133px; background-color: red; border-radius: 0px 0px 0px 0px; background-image: radial-gradient( circle 20px at 20px 50%, #F5F7F9 19px, transparent 20px );background-repeat: repeat-y;background-size: 40px 133px;background-position: 50% 50%;vertical-align: center;}

Upvotes: 0

Related Questions