html – Alternate Position Circle Background Pattern Using CSS Or Image-ThrowExceptions

Exception or error:

Is there any way how to make a background of circle (with a circle inside) in an alternative position in CSS if possible. Or an image pattern.

enter image description here

I tried to make an image pattern of circle like this. Then in my css, it will repeat it but I want to make this as an alternative position. Is there any way to solve?

Here’s the image that I made:

enter image description here

Here’s the output of that repeated image:

enter image description here


Expected:

The goal is to make the first row start in different x position then the others. If css is possible then it is better because it is much faster to load than an image. 🙂

How to solve:

Create the circles with repeating-radial-gradient, then play with background-position. For make the first row in different position from others, make it another layer of gradient, and give it different background-position. like so:

body {
width: 100%;
height: 100vh;
margin:0;
background: radial-gradient(#FAC766 0px, #FAC766 13px, #C9E6F4 13px, #C9E6F4 25px, white 25px, white) repeat-x, linear-gradient(white, white) no-repeat, repeating-radial-gradient(#FAC766 0px, #FAC766 13px, #C9E6F4 13px, #C9E6F4 25px, white 25px, white) repeat;
background-size: 50px 50px, 100% 50px, 50px 50px;
background-position: -25px 0, 0 0, 0 0;

}

Explanation

  • Put repeating gradient of the circles on all the page
  • Put on it white gradient to cover the space of the first line
  • Put another gradient of circles, this time repeating only on x-axis, and with different background-position. this will be rendered on the white gradient, instead the original circles

Leave a Reply

Your email address will not be published. Required fields are marked *