Making a dotted grid with CSS

0 votes

I want the whole body to have a dotted grid

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

The issue is that I want to relocate it so that a dot is placed at (0, 0), which is the body's top left corner. As a result, the entire structure should be adjusted by -20px and -20px. Or do you think there's a better way?

May 30, 2022 in CSS by Edureka
• 13,620 points
1,981 views

1 answer to this question.

0 votes

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;
}

 

answered May 31, 2022 by Edureka
• 12,690 points

Related Questions In CSS

0 votes
1 answer

What is the proper way to display a logo with CSS?

An <img> element is the proper way ...READ MORE

answered Jun 10, 2022 in CSS by Edureka
• 12,690 points
713 views
0 votes
1 answer

Change a HTML5 input's placeholder color with CSS

There are three implementations available: pseudo-elements, pseudo-classes, ...READ MORE

answered Jun 10, 2022 in CSS by Edureka
• 12,690 points
695 views
0 votes
1 answer

Rails - how to integrate a form with bootstraps css?

Here is how I did it  in my ...READ MORE

answered Jun 28, 2022 in CSS by Edureka
• 12,690 points
1,142 views
0 votes
1 answer

CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page

A simple solution is to make the ...READ MORE

answered Jun 21, 2022 in CSS by Edureka
• 12,690 points
4,150 views
0 votes
1 answer

When to use IMG vs. CSS background-image?

You can transition a div's background image ...READ MORE

answered Jun 10, 2022 in CSS by Edureka
• 12,690 points
847 views
0 votes
1 answer

How to use CSS media query to scale background-image to viewing window

If you only want the desktop version ...READ MORE

answered Jun 17, 2022 in CSS by Edureka
• 12,690 points
1,277 views
0 votes
0 answers

CSS: background image on background color

If this panel is chosen, a panel ...READ MORE

Jun 22, 2022 in CSS by Edureka
• 13,620 points
489 views
0 votes
0 answers

CSS background image that can scroll

I'm attempting to make a backdrop image ...READ MORE

Jul 5, 2022 in CSS by Edureka
• 13,620 points
1,681 views
0 votes
1 answer

Is there any way to colorize a white PNG image with CSS only?

Filters can be used with -webkit-filter and ...READ MORE

answered May 27, 2022 in CSS by Edureka
• 12,690 points
1,898 views
0 votes
1 answer

How to build a special polygon (a kite shape) with HTML & CSS only?

I made two divs, one for Arc ...READ MORE

answered May 28, 2022 in CSS by Edureka
• 12,690 points
1,481 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP