Creating a Hero or Banner Image

A hero (or banner)image is simply a large image placed at the top of a page. Typically these images contain text.

There are multiple approaches to creating these -- a quick search will show lots of various approaches.

Flexbox is an excellent choice!

1. Define the containing element.
2. Set the desired width (typically 100%).
3. Set display: flex.
4. Define the alignment as desired (in the example below, the contents are centered both vertically and horizontally).
5. Set a background-color as a fallback. This will only appear if the image fails to load.
6. Set the font color as desired.
7. Set a background image using the background-image element. Remember that the format is somewhat different from a normal image.
8. Set the background-repeat and background-size elements. If the selected image is large enough to cover the area, set background-repeat to no-repeat. (Repeating images are difficult -- the intersection between images often does not look good). The background-size element is really helpful here: select cover to completely fill the area.

header {
    width: 100%;
    text-align: center;
    background-color: silver;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url("assets/header.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    color: whitesmoke;
}

Image Issues

Image selection is rather important; selecting the wrong image may make the text illegible. Responsive design makes this even worse, since the text may be positioned over differing portions of the image on different devices. There are numerous approaches to solving this issue.

Darken the Entire Image

This is a quick and simple approach! Simply darken the image somewhat.

Filter

Normally filter would be an excellent choice for something like this. Unfortunately filters do not work well with background images. CSS Tricks has an interesting article on this issue.

Gradient

Recall that the background-image property can support multiple images. Also recall that a linear-gradient can be used as a background. Finally, remember the alpha channel in our color specifications.

Simply add a transparent gradient above the image! This is an amazingly simple way to darken the entire image without editing the image directly!

header {
    width: 100%;
    text-align: center;
    background-color: silver;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("assets/header.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    color: whitesmoke;
}

Use the Backdrop-Filter Option

Another (more recent) approach involves applying a filter to the area behind the text. This approach is similar to applying a filter; however, filters do not work on background images.

    
header {
    width: 100%;
    font-size: 2em;
    text-align: center;
    background-color: silver; 
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(header.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
    
header p {
    -webkit-backdrop-filter: blur(2px) brightness(125%) grayscale(20%);
    backdrop-filter: blur(2px) brightness(125%) grayscale(20%);
    padding: .5em;
    border-radius: 25px;
    color: white;
    border: thin solid silver;
}
    

Other Options

The text could be placed within a box with a different color background.

Another option would be to blur the background around the text.

CSS Tricks has an excellent discussion of multiple options.