Background formatting for the text under a header

[Werwerf]

Things I have tried

I have tried to use HTML (using <span>) but that disables the Markdown formatting inside.

I have created a CSS snippet (below) based on examples I found on this forum (thanks! ).

I have managed to format the header as I need, but not the text below the header:

.cm-s-obsidian .HyperMD-header-3,
  .markdown-preview-view h3 ul
   {
    background: #3e6185;
    width: 100%;
    padding: 10px;
    border: 2px solid #6a9ed4;
    border-radius: 10px;
    margin-top: 40px;
  }

What I’m trying to do

I want to create a block of text under a header that is visually cohesive (by having a background box, just like the code example above) while being able to use the Markdown format inside (links, lists, callouts, etc.).

[efemkay]

as of now, i only know two ways to achieve what u described. and one of it only works in reading view

Using Contextual Typography plugin and leverage on list

have markdown in the following format/structure coupled with the css snippet. for this u need the Contextual Typography plugin.

## Header 2
- item or even a paragraph
- another item or paragraph
    - can also have subs

div[data-heading="Header 2"].el-h2 + .el-ul {
    background-color: hsla(290, 30%, 30%, 1);
    border-radius: 4px;
}

results

Using Callout and format that background

have markdown in the following format/structure, coupled with blank callout and coupled with the css snippet

• blank callout like MCL’s blank-container custom callout (Multi Column - Modular CSS Layout (efemkay.github.io))

then use custom css to format the background

## Header 2
> [!blank-container|blue]
> text or paragraph
> - can even be a lists
>     - can also be sub list
> ```js
> code block will be a bit of pain to edit
> ```

div.callout[data-callout-metadata="blue"] {
    background-color: hsla(290, 30%, 30%, 1);
    mix-blend-mode: normal;
}

results

[Werwerf]

Hi @efemkay !

Works like a charm, thanks!

I have applied the first solution (with the Contextual typography plugin) and it does the trick. Works on view mode only, but that is good enough!

Before the solution:

After the solution:

The CSS snippet that does it with the Contextual typography plugin:

.cm-s-obsidian .HyperMD-header-3,
  .markdown-preview-view h3
   {
    background: #3e6185;
    width: 100%;
    padding: 10px;
    border: 2px solid #6a9ed4;
    border-radius: 10px;
    margin-top: 40px;
  }
div .el-h3 + .el-ul {
    background-color: hsla(290, 30%, 30%, 1);
    border-radius: 4px;
}

You can modify it to change any header level or apply it to several heades.