Kevin Powell - Community•7mo ago

background individual property not working similar to background shorthand

  background: 
    radial-gradient(farthest-side,#ffa516 94%,#0000) top/8px 8px no-repeat,
    conic-gradient(#0000 30%,#ffa516);

  background: 
    radial-gradient(farthest-side,#ffa516 94%,#0000) top/8px 8px no-repeat,
    conic-gradient(#0000 30%,#ffa516);

background-image: 
  radial-gradient(farthest-side,#ffa516 94%,#0000),
  conic-gradient(#0000 30%,#ffa516);
background-position: top center;
background-size: 8px 8px;
background-repeat: no-repeat;

background-image: 
  radial-gradient(farthest-side,#ffa516 94%,#0000),
  conic-gradient(#0000 30%,#ffa516);
background-position: top center;
background-size: 8px 8px;
background-repeat: no-repeat;

I don't why they are not giving the same results here are the jsfiddles where these properties are being used https://jsfiddle.net/nmf1t3v8/ https://jsfiddle.net/q6kvw290/

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

1 Reply

Mannix•7mo ago

so in a shorthand the browser populates all the properties you can check that in dev tools. The thing you are missing is the background-size for the conic-gradient weirdly enough if you put the same value the browser does you get different result but to make it work you need to set background-size to background-size: 8px 8px, auto or background-size: 8px 8px, 100%;

Gaming

Programming

background individual property not working similar to background shorthand