Tips & tricks

Have you ever wonder how other people implemented the sticky header image, which doesn’t move while the user is scrolling the main content like this:

Sticky header image

To answer this question, today in this blog, we will find out how to apply this amazing effect and learn more about background’s CSS property.

Step 1. Firstly we need to set up the page layout:

<body>
    <header id="custom-header">
        <div id="logo">
            <img id="logo-image" src="https://cdn.000webhost.com/000webhost/logo/000webhost-forum-people.jpg">
            <div class="text">
                <h1>Nullam vel sem</h1>
                <h3>Nullam nulla eros ultricies sit</h3>
            </div>
        </div>
    </header>

    <section id="main">
        <header class="d-header">
            <div class="container">
                <span class="left-header">
                    <img src="https://www.000webhost.com/forum/uploads/default/original/3X/c/6/c62bdce6059e22d9b05f3cb5e525a6983acae762.png" />
                </span>
                <span class="right-header">
                    <button class="btn">Sign up</button>
                    <button class="btn">Sign in</button>
                </span>
            </div>
        </header>
        <p class="container content">
            ...Curabitur a felis in nunc...
        </p>
    </section>
</body>

Css:

#custom-header {
    height: auto; //We set the height of header equal total height of it's children
    background-color: rgba(0, 0, 0, .2) !important;
}
#custom-header #logo {
    width: 100%;
    color: #fff;
    text-align: center;
}

#custom-header #logo-image {
    width: 100%;
}


.d-header {
    padding: 0.5em 0;
    background-color: #b80303;
}
.container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.btn {
    border: none;
    color: #fff;
    background: #820000;
}

As a result we have something like this before our implementation:

Raw layout

Unfortunately, it’s not what we want, there are still 2 things missing here:

  1. The header image still move top while user scrolling, we need to make it stick at the top permantly
  2. The text in the header is not centered horizontally and vertically in header

Step 2. Transform <img> tag to background-image css

Let’s do it. You need to know that that the easiest way to make header image stick at the top is transforming the image inthe to header background image. So the first we will remove <img> in header and set that image as the header’s background 

You need to know that that the easiest way to make header image stick at the top is transforming the image inthe to header background image. So the first we will remove <img> in header and set that image as the header’s background 

<div id="logo">
<!--<img class="image" src="https://cdn.000webhost.com/000webhost/logo/000webhost-forum-people.jpg">-->
    <div class="text">
        <h1>Nullam vel sem</h1>
        <h3>Nullam nulla eros ultricies sit</h3>
    </div>
</div>

#custom-header {
    background-color: rgba(0, 0, 0, .2) !important;
    background-image: url(https://cdn.000webhost.com/000webhost/logo/000webhost-forum-people.jpg) !important;
    background-size: 100%;
    background-blend-mode: multiply;
    position: relative;
    padding-top: calc(345 / 1440 * 100%);//we make a litte trick in order to allow customer-header has the same hight with responsive background-image
}

#custom-header #logo {
    width: 100%;
    color: #fff;
    text-align: center;
    position: absolute;//Because customer-header set padding-top so to keep the logo stand in the middle of custom-header, we need to make it absolute with position
    top: 0;
    left: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

Then let’s check the result, we’re closer to the goal today :>

First result

Step 3. Apply background-attachment:fixed

Finally. we need to apply background-attachment:fixed to our header:

#custom-header {
    ...
    background-attachment: fixed;
}

Let enjoy :).

Final result

Conclusion

In summary, we can use background-attachment: fixed; in some case that require the background image fixed to the specific position while the user scroll the page. You can find the full source code here: https://stackblitz.com/edit/stickyheade

Leave a Reply