Match peak to background sample dimension with calc-size()

The issue

I’ve a bit with a background sample that repeats on each axes. I needed the vertical repeat to be aligned with the sample’s peak, so the sample received’t have cut-offs.

Take the next design.

.part {
  --tile-width: 52px;
  --tile-height: 44px;
  background-image: url("sample.png");
  background-size: var(--tile-width) var(--tile-height);
}

The Espresso Information

Every part you want to pull an amazing shot at residence: selecting the correct beans, dialing in your grind dimension.

Do you discover the cut-off on the backside? This doesn’t look good. The very first thing I thought of was to make use of the spherical worth for the background-repeat property.

.part {
  background-repeat: spherical;
}

That labored.

The Espresso Information

Every part you want to pull an amazing shot at residence: selecting the correct beans, dialing in your grind dimension.

However my interior self mentioned no. This isn’t the very best answer, given the fashionable CSS instruments we’ve. What I don’t like about this answer is that utilizing the spherical key phrase will power the sample to shrink or develop.

Within the following demo, click on “Make it dance” and see how the sample dimension adjustments.

Make it dance

The Espresso Information

Every part you want to pull an amazing shot at residence: selecting the correct beans, dialing

Let’s discover a greater answer. If you happen to don’t wish to learn the complete article, you’ll be able to leap to the answer beneath.

Utilizing calc-size() and spherical()

The next answer works solely in Chrome on the time of writing this text.

We are able to use calc-size() to get the auto peak worth, then use it with the spherical() perform to spherical it to the closest worth we wish. On this case, the worth is the sample’s peak.

.part {
  peak: calc-size(auto, spherical(up, dimension, var(--tile-height)));
}

At first look, it seems like setting a set peak. The truth is, it really works like min-height, because it calculates the auto peak, then rounds it as much as the closest a number of of the tile peak.

Phrases15

The Espresso Information

Every part you want to pull an amazing shot at residence: selecting the correct beans, dialing

It really works nice for various sample sizes. All we have to present is the tile peak. Take a look at the next demo and play with the patterns:

The Espresso Information

Every part you want to pull an amazing shot at residence: selecting the correct beans, dialing in your grind dimension.

I wrote in regards to the spherical() perform if you wish to dig extra into it.

Rounding up or down?

Rounding the peak as much as the closest a number of of the tile peak will enhance the peak typically.

Swap between the up and down choices within the demo beneath.

I want down, because it doesn’t enhance the peak when it’s not wanted, but it surely’s not an enormous deal.

What about padding?

We have to add vertical padding, so I thought of utilizing spherical() for it, too. See beneath:

.part {
  peak: calc-size(auto, spherical(up, dimension, var(--tile-height)));
  padding-block: spherical(up, 1rem, var(--tile-height));
}

The highest and backside padding is the same as the sample’s tile peak.

The place rounding down feels a bit odd

Discover how the content material is simply too near the sting. That is the place it begins to really feel a bit odd, so on this case, I’d swap to rounding up for extra anticipated habits.

The whole answer

Right here is the whole CSS for the answer within the previews demos.

.part {
  
  --tile-width: 52px;
  --tile-height: 44px;
  background-image: url("sample.svg");
  background-size: var(--tile-width) var(--tile-height);
  padding-block: spherical(up, 1rem, var(--tile-height));
  peak: calc-size(auto, spherical(up, dimension, var(--tile-height)));
}

Study extra about CSS layouts

Constructing layouts generally is a difficult process, particularly when you don’t know the core psychological mannequin of CSS layouts. You don’t have to fret about that anymore. I launched an interactive CSS structure course, and I referred to as it The Structure Maestro.

Take a look at The Structure Maestro course and degree up your CSS structure abilities.