# BlockWrapper Styling

**URL:** <https://discuss.codemirror.net/t/blockwrapper-styling/9650>\
**Category:** v6\
**Created:** [January 13, 2026, 5:47am UTC](https://discuss.codemirror.net/t/blockwrapper-styling/9650 "2026-01-13T05:47:41Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![GnohzGniy](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/gnohzgniy/32/5306_2.png) [@GnohzGniy](https://discuss.codemirror.net/u/GnohzGniy)\
**Post date:** [January 13, 2026, 5:47am UTC](https://discuss.codemirror.net/t/blockwrapper-styling/9650/1 "2026-01-13T05:47:41Z")

</div>

I was trying out the new [BlockWrapper](https://codemirror.net/docs/ref/#view.BlockWrapper) for decorations cross multiple lines, it works great!

 ![image](https://discuss.codemirror.net/uploads/default/original/2X/f/fc145dd5ae3a9ea1aae17c1202148fc308c24e12.png)

One minor “issue” I noticed is that it’s quite challenging to add background colors to it, simply adding a background color would hide the selection layer because it has a bigger z-index.

Am I missing something obvious or the correct way to achieve that (like a rounded rect for code blocks) is to leverage pseudo-classes like:

```auto
.cm-md-codeBlockWrapper {
  position: relative;
}

.cm-md-codeBlockWrapper::before {
  position: absolute;
  z-index: -3;
  content: '';
  inset: 0;
  background-color: #f5f5f5;
  border-radius: 6px;
}

```

As always, thanks for your great work!

---

<div class="post-metadata">

**Author:** ![marijn](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/marijn/32/136_2.png) [@marijn](https://discuss.codemirror.net/u/marijn)\
**Post date:** [January 13, 2026, 8:00am UTC](https://discuss.codemirror.net/t/blockwrapper-styling/9650/2 "2026-01-13T08:00:13Z")

</div>

Yes, this is a thing with all backgrounds in CodeMirror, including line elements and inline marks—you want to make them as transparent as possible, so that other elements behind them remain visible.

---

<div class="post-metadata">

**Author:** ![GnohzGniy](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/gnohzgniy/32/5306_2.png) [@GnohzGniy](https://discuss.codemirror.net/u/GnohzGniy)\
**Post date:** [January 13, 2026, 9:03am UTC](https://discuss.codemirror.net/t/blockwrapper-styling/9650/3 "2026-01-13T09:03:39Z")

</div>

Thanks for the explanation!