Add a full-width container looking like a Facebook Page Header

Hi! For an ad campaign we were looking for a clean, easy-to-use container that looks something like Facebook’s Header on public pages. To use this, you can view the CodePen or scroll down for further details.

See the Pen Facebook Page Header Design by Nico Pahl (@gooloonetwork) on CodePen.

First, we need to place the DIV. Use the following code and change it according to your needs.

<div id="fb-header" style="width: 100%; max-width: 1200px; margin: auto; overflow: hidden; position: relative; border-bottom: 1px solid #ccc;">
        <div style="position: relative;">
            <img id="cover-image" src="https://www.gooloo.de/wp-content/uploads/2024/09/hero_banner_under5.webp" alt="Cover Image" style="width: 100%; height: 75%">
            <img id="profile-image" src="https://www.gooloo.de/wp-content/uploads/2024/09/bioderma.png" alt="Profile Image" style="width: 150px; height: 150px; border-radius: 50%; position: absolute; bottom: -75px; left: 20px; border: 5px solid white; background-color:#fff; ">
        </div>
        <div style="padding: 80px 20px 20px; background-color: white;">
            <h1 id="page-name" style="margin: 0; font-size: 24px; font-weight: bold;">BIODERMA</h1>
            <p id="placeholder-text" style="margin: 15px 0; color: gray;">Entdecke mehr</p>
            <button style="background-color: DodgerBlue; color: white; border: none; padding: 10px 20px; font-size: 16px; cursor: pointer; border-radius: 5px;">
                <i class="fas fa-shopping-bag"></i> Go Shopping
            </button>
        </div>
    </div>

To make it look nice, we need to add some CSS. Here’s the CSS for this snippet:

@media (max-width: 768px) {
        #profile-image {
            width: 100px;
            height: 100px;
            bottom: -50px;
        }
        #page-name {
            font-size: 20px;
        }
    }

    @media (max-width: 480px) {
        #profile-image {
            width: 80px;
            height: 80px;
            bottom: -40px;
        }
        #page-name {
            font-size: 18px;
        }
    }

You will need to update some parts of the code according to your needs.

In the Image ID, change the background image to your needs.

In the Profile Picture, change it according to your needs, f.ex. a Logo.

In the page-name element, change the Word to your needs, in this example, its the brand “BIODERMA”.

Below it, is the placeholder text. It supports most HTML elements and can be easily modified.

Lastly, change the button link, icon and/or text according to your needs.