A full-width navbar that sticks to the top of the page when you scroll.

nav.navbar {
  position: fixed;
  top: 0;
  width: 100%;
}

See also Bulma navbar documentation.

Sticky footer. Note that if your footer is not a navbar, you cannot use the styling above.

Note if your footer is tall, it may not look good fixed to the bottom of the screen especially on mobile.

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
}

See more approaches here.

Background images

Cover image

Set a full-width image at the top of your page, possibly behind. The no-repeat part is useful to stop the image from repeating - the default behavior.

el {
    background-image: url(...);
    background-repeat: no-repeat;
    background-size: 100% auto;
}

Setting background-size: cover could also work. The repeat might not be needed.

Or use:

/* #root {
    background-image: linear-gradient(to bottom right, #222, #eee);
    background-repeat: no-repeat;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
} */

Position could be center top.

Resources

Tutorials:

Button

Some useful styling - in particular for a DocsifyJS site.

.myButton {
    background-color: var(--theme-color);
    color: white;
    /* Slightly larger */
    font-size: 1.0em;
    /* Round the edges */
    border-radius: 8px;
    padding: 6px 12px;
    /* Change cursor on hover */
    cursor: pointer;
}
.myButton:hover {
    filter: brightness(110%)
}
/* Shift the button down on click */
.myButton:active {
    position:relative;
    top: 2px;
}