Break text around background tag image?

BrodyStone21

Here is my tag parent tag, "Construction," which has several child tags. The child tags are overlapping the background image, which makes sense, because it's a background image, but I'd like to have the child tags fall down to the next line if they are going to hit the background image. Is there a way to bring a background image to the foreground?

Here is the code I use to achieve the background image:

.TagTile.colored:nth-child(1) {
  background-image:
    url("https://metalbuildingforum.com/assets/files/2024-08-16/1723822674-879221-grouping.webp");
      background-position: right;
      background-repeat: no-repeat;
      background-size: 20%;
      background-attachment: scroll;
}

Open to any suggestions!

clarkwinkelmann

If you know your image is always below the description, you can offset just the subtags with a padding on the .TagTile-children element:

.TagTile-children {
  padding-right: 60px;
}

If you want to apply it to the description as well, you can repeat the code for .TagTile-description

If you want to offset everything including title, description and subtags, you can add the padding-right to .TagTile-info

BrodyStone21

clarkwinkelmann amazing sir, thank you very much. I’ve added this to my config and it works perfectly!

EDIT: if anyone wants to see, go to https://metalbuildingforum.com/

Here is the code I’m using

.TagTile-info { /* offset main tag */
  padding-right: 60px;
}

.TagTile-description { /* offset tag description */
  padding-right: 60px;
}
.TagTile-children { /* offset child tags */
  padding-right: 60px;
}

BrodyStone21

clarkwinkelmann How would you go about adding padding to the image itself? I don’t want the image colliding with the cell wall.

Here is the current coding I’m using per tag. I tried background-padding-right and padding-right but neither worked properly.

.TagTile.colored:nth-child(1) {
  background-image:
    url("https://metalbuildingforum.com/assets/files/2024-08-16/1723822674-879221-grouping.webp");
      background-position: right;
      background-repeat: no-repeat;
      background-size: 20%;
      background-attachment: scroll;
      background-color: #444444;
}

Please let me know if you have a solution for me!

EDIT: Also, how would you change text color in header via CSS?