How to position a repeating radial gradient within a card?

Question

I have a profile on a website that allows you to enter HTMl and CSS in your settings to customize your page. My goal is to have the center of a repeating radial gradient start behind a circular picture within a .card so the rings form around it.

My problem is that when I add any sort of positioning (like "at top") the gradient completely disappears.

I've tried putting the CSS directly within the HTML instead to see if it was the card's id messing with it, but I'm getting the same result.

When I put the same code into jsfiddle and add the positioning, it works for some reason.

background: repeating-radial-gradient(circle,#000, #000 20px, #fff 20px, #fff 40px)

Result:

background: repeating-radial-gradient(circle at top,#000, #000 20px, #fff 20px, #fff 40px)

Result:

My profile

#card1 {
  padding-left: 20px;
  padding-right: inherit;
}

#card1 .card {
  border: none;
  background: repeating-radial-gradient(circle, #000, #000 20px, #fff 20px, #fff 40px)




  
    
      
        
        
          
            
            
              Name
          
          
            
            
            


            
              

                testteste tdis udfufjifjieof jiosjf ijsdpojoisdp jsopd jodisdjos gjiofdsjgosdfgjio djfewiaof fewjfiwoefqwieofjoi fejiwfjweifje fewjfiewjfowe
              

              

              
                
                  Gender
                Content
              
              

              
                
                  Age
                Content
              
              

              
                
                  Role
                (what they do)
              
              

              
                HTML
                
                @Pinky
              
              

              
                Theme
                
                
                
                  Song Name

How to position a repeating radial gradient within a card?

Answers (0)

Related Questions