#tinyCSStip Want your page background to contain an integer number of dots?

Use `background-repeat: space`! This inserts a bit of space in between background repetitions so we have an integer number of them. Well-supported for ages. 🥳

Live on @codepen https://codepen.io/thebabydino/pen/RwXvryZ

#CSS #pattern #gradient #cssPattern #cssGradient #code #coding #frontend #web #dev #webDev #webDevelopment

Integer number of dots with background-repeat: space

...

This isn't always ideal because the end rows & columns of dots always stick to the edge, which leads to ugly gaps if the dots are big + the viewport is small.

Those boxes not having dimensions that are a multiple of the background-size box ones doesn't look that good either.

So... how to improve?

#CSS #code #coding #frontend #web #dev #webDev #webDevelopment #cssGradient

We make the background-size fit an integer number of times within the viewport width and height.

We need length division for that, so we use the tan(atan2()) hack by @JaneOri.

Then, we set box dimensions/ margins to be multiples of background-size https://www.reddit.com/r/css/comments/1gp4cq0/comment/lwqkyrd/

Really cool thing is it works well on zoom, see it on @codepen
https://codepen.io/thebabydino/pen/ZEgwBqL

#CSS #Maths #mathematics #cssMaths #cssPattern #pattern #cssGradient #code #web #dev #webDev #webDevelopment #coding #frontend #cssHack

@anatudor Hmmm... sounds like `background-repeat` needs to get the `space-between` vs `space-around` vs `space-evenly` keywords from layout alignment.

https://drafts.csswg.org/css-align-3/#distribution-values

(The existing `space` keyword matches the `space-between` behaviour in the more nuanced options.)

CSS Box Alignment Module Level 3

@AmeliaBR @anatudor Or we need an explicit background-gap property.

Or just to spec & implement my proposed @image rule (accepted by the WG), then it’s just margin :D

@anatudor @JaneOri This is super cool! I wish I could have used something like it for the 2023 @Typographics website, which does some similar unitization for background patterns (rendered with web fonts!) and internal container boxes.

I couldn’t figure out a reliable CSS solution but @pixelambacht helped with a minimal JS-aided solution:
https://typo.social/@nicksherman/110028680089466500

Nick Sherman (@[email protected])

Attached: 1 image … For anyone curious why I was asking about CSS techniques for snapping the height of elements to multiples of a number, you can see what I wanted it for on the new @Typographics website we just launched yesterday: https://2023.typographics.com Getting all the seams of boxes for content to responsively snap to match repeating ornament patterns is oddly satisfying. Unfortunately there isn’t any good CSS option for this (yet), but @pixelambacht helped out with a minimal JavaScript solution.

typo.social