Include an image on the header of the page

[alexpsnchz]

Hi,

So, I am interested on including and image instead of a color an the top bar of the documentation web page. I know it is possible to do it. I saw some documentation web pages with it (e.g. [https://scc.dipc.org/docs/getting_started/]), but i didn't find the way to do it in the documentation of mkdocs-material.

If someone can help me on this, I will appreciate it.

Thank you!

[alexvoss]

The approach I would take would be to override the header block to wrap the existing header into another div, then style that. Replace the gradient below with the image you want.

mkdocs.yml:

site_name: My Docs

theme:
  name: material
  custom_dir: override

extra_css:
  - assets/stylesheets/extra.css

override/main.html:

{% extends "base.html" %}

{% block header %}
  <div class="myheader">
    {{ super() }}
  </div>
{% endblock %}

docs/assets/stylesheets/extra.css:

.myheader {
  background-image: linear-gradient(rgba(0, 0, 192), rgba(0 , 0, 128));
}

.md-header {
  background-color: transparent !important;
}

~

[alexpsnchz]

Thank you, it works perfectly!