Making A Dotted Grid With CSS - Background Image - Stack Overflow

Sorry, we no longer support your browser Please upgrade to Microsoft Edge, Google Chrome, or Firefox. Learn more about our browser support.

1. 1. Home
   2. Questions
   3. Tags
   4. Users
   5. Companies
   6. Labs
   7. Jobs
   8. Discussions
   9. Collectives

   10. Communities for your favorite technologies. Explore all Collectives

2. Teams

   Ask questions, find answers and collaborate at work with Stack Overflow for Teams.

   Try Teams for free Explore Teams
3. Teams

4. Ask questions, find answers and collaborate at work with Stack Overflow for Teams. Explore Teams

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

Get early access and see previews of new features.

Learn more about Labs Making a dotted grid with CSS Ask Question Asked 5 years, 9 months ago Modified 5 years, 9 months ago Viewed 48k times 35

I want the whole body to have a dotted grid

body { background-image: radial-gradient(black 1px, transparent 0); background-size: 40px 40px; }

The problem is that I want to shift it so that a dot is placed at the point (0, 0), i.e. the top left corner of the body. So the whole structure should be shifted at -20px, -20px. Or probably there is a better solution?

• css
• background-image
• radial-gradients

Share Improve this question Follow edited Mar 27, 2019 at 9:57 Temani Afif 271k2828 gold badges360360 silver badges475475 bronze badges asked Mar 26, 2019 at 18:37 Eugene BarskyEugene Barsky 5,99233 gold badges2020 silver badges4141 bronze badges 0 Add a comment |

2 Answers 2

Sorted by: Reset to default Highest score (default) Trending (recent votes count more) Date modified (newest first) Date created (oldest first) 48 Update

The following solution works, but only for a fixed background-size. See @Temani Afif's answer for a better solution.

Answer

You can use the background-position CSS property to do exactly what you were thinking.

body { background: white; background-image: radial-gradient(black 1px, transparent 0); background-size: 40px 40px; background-position: -19px -19px; }

Share Improve this answer Follow edited Mar 27, 2019 at 12:01 answered Mar 26, 2019 at 18:40 Tim KleinTim Klein 2,7581818 silver badges1919 bronze badges 4

• Thanks, that's exactly what I wanted!! Strangely, I tried it, putting it above the whole code and it didn't work. – Eugene Barsky Commented Mar 26, 2019 at 18:43
• 1 In your case, you are utilizing the background shorthand property which you could supply a host of parameters. If you put the background-position property (or any other specific property for the background) before the background shorthand property, then it will be overridden by the shorthand property filling in default values. It is important that anywhere you use a shorthand property to set it first, then set any specific properties. Other examples of shorthand properties include animation, flex, transition, etc. – Tim Klein Commented Mar 26, 2019 at 18:48
• Thank you so much for the explanation! Indeed, I've forgotten about the shorthandedness of background. – Eugene Barsky Commented Mar 26, 2019 at 18:59
• Unfortunately the radial-gradient approach results in circles drawn without antialiasing. One alternative would be using a Houdini worklet to customize the painting process and draw them as shown in codepen.io/arnellebalane/pen/yLVOOgW however, as of early 2023, Houdini is only supported in Chromium-based browsers (not Firefox or Safari). – Keavon Commented Mar 8, 2023 at 4:48

Add a comment | 20

Here is another way in addition to changing the background-position that may work whataver the size is:

body { background-image: radial-gradient(circle at 1px 1px, black 1px, transparent 0); background-size: 40px 40px; }

body { background-image: radial-gradient(circle at 1px 1px, black 1px, transparent 0); background-size: 50px 30px; }

Basically the idea is to change the position of the dots inside the area defined by background-size to the top/left instead of shifting all the background

Share Improve this answer Follow edited Mar 26, 2019 at 19:59 answered Mar 26, 2019 at 19:22 Temani AfifTemani Afif 271k2828 gold badges360360 silver badges475475 bronze badges 4

• Very nice! Could you please explain do at 2px 2px and 1px mean? – Eugene Barsky Commented Mar 26, 2019 at 19:53
• 1 @EugeneBarsky the 1px is basically the radius of the circle (since we are using radial-gradient) so I should place the center of the circle at 2px 2px, it could also be 1px 1px, should give the same result .. here is an example with bigger value to better see : jsfiddle.net (radius 10px and we place the center at 10px 10px) – Temani Afif Commented Mar 26, 2019 at 19:58
• 1 @EugeneBarsky edited the answer to avoid confusion so we place it at 1px 1px which is the radius ... and of course you can place it where you want (initially I made it 2px 2px to make it a bit far from the edge) – Temani Afif Commented Mar 26, 2019 at 20:00
• Thank you for the explanations! Unfortunately the link to jsfiddle doesn't work. – Eugene Barsky Commented Mar 27, 2019 at 6:11

Add a comment |

Your Answer

Reminder: Answers generated by artificial intelligence tools are not allowed on Stack Overflow. Learn more

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.
• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Draft saved Draft discarded

Sign up or log in

Sign up using Google Sign up using Email and Password Submit

Post as a guest

Name Email

Required, but never shown

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged

• css
• background-image
• radial-gradients

or ask your own question.

• The Overflow Blog
• The real 10x developer makes their whole team better
• The ghost jobs haunting your career search
• Featured on Meta
• The December 2024 Community Asks Sprint has been moved to March 2025 (and...
• Stack Overflow Jobs is expanding to more countries

Linked

2 How to create a Dotted Grid/Graph Sheet background using css? 1 dotted background with pure html/css 2 SVG isn't being displayed

Related

2 no-repeat CSS radial-gradient 3 CSS gradient to produce dotted line 2 CSS: background image with gradient "overlay" 4 How to create grid lines on top of an image in css? 1 Background gradient spanning multiple CSS grid areas 2 Using CSS background image to output grid using gradient with offset 1 CSS background grids: horizontal repeating-linear-gradient with single vertical column 3 How to create a zig zag pattern using CSS 2 CSS background with linear colored radials 1 Multiple grandients and radial gradient in background

Hot Network Questions

• Why was creating sunshields for Webb telescope challenging?
• How to place a heavy bike on a workstand without lifting
• 1Hz pulse generator using 1ppm TCXO - schematic review
• What word(s) were used to identify the Van Dyke style of beard in the 17th century?
• Did the Israelites defecate when eating the manna?
• What's the name of the form of the song "12 Days of Christmas"?
• Balancing Magic Numbers and Readability in C++ Code
• How to make an iron star visually appealing
• Fibonacci Series Exercise
• What information can I obtain from power spectrum density (PSD) that I can't obtain from Fourier transform of a signal?
• Should a language have both null and undefined values?
• Name that logic gate!
• Stuck on task on decimal notation of a number
• It's a Wonderful Life Mr. Potter
• Can Ancient Joker choose a Suit you don’t have?
• Elementary consequence of non-abelian class field theory
• Where did Tolstoy write that a man is like a fraction?
• How to limit width of a cell in an array?
• Why are the layers of the James Webb Telescope’s sunshield so thin?
• Notation for Organ Registration in Bach/Árpád Kommt Ihr Töchter
• How does Electrum ismine() work?
• Would the poulterer's be open on Christmas Day for Scrooge to buy their prize turkey?
• PSE Advent Calendar 2024 (Day 24): 'Twas the Meta before Christmas
• Debian doesn't recognise Desktop directory, and instead uses the entire home directory as the desktop

more hot questions Question feed Subscribe to RSS Question feed

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

default