# Particle effect in the header

**URL:** <https://forum.bootstrapstudio.io/t/particle-effect-in-the-header/11270>\
**Category:** Webdesign Help\
**Created:** [April 22, 2024, 8:06am UTC](https://forum.bootstrapstudio.io/t/particle-effect-in-the-header/11270 "2024-04-22T08:06:18Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Languedok](https://forum.bootstrapstudio.io/letter_avatar_proxy/v4/letter/l/c2a13f/32.png) [@Languedok](https://forum.bootstrapstudio.io/u/Languedok)\
**Post date:** [April 22, 2024, 8:06am UTC](https://forum.bootstrapstudio.io/t/particle-effect-in-the-header/11270/1 "2024-04-22T08:06:18Z")

</div>

Hi, I am trying to include a particle effect that appears only in the header image. I’ve managed to get it to show, but the particle effect is going out of the image. How can I make the particle effect match exactly above the header image? Can someone give me a hand?

My web: [https://creotuweb.net](https://creotuweb.net)

---

<div class="post-metadata">

**Author:** ![printninja](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/printninja/32/481_2.png) [@printninja](https://forum.bootstrapstudio.io/u/printninja)\
**Post date:** [April 22, 2024, 8:08pm UTC](https://forum.bootstrapstudio.io/t/particle-effect-in-the-header/11270/2 "2024-04-22T20:08:37Z")

</div>

I see no particle effect when I view your website

---

<div class="post-metadata">

**Author:** ![Languedok](https://forum.bootstrapstudio.io/letter_avatar_proxy/v4/letter/l/c2a13f/32.png) [@Languedok](https://forum.bootstrapstudio.io/u/Languedok)\
**Post date:** [April 22, 2024, 9:38pm UTC](https://forum.bootstrapstudio.io/t/particle-effect-in-the-header/11270/3 "2024-04-22T21:38:53Z")

</div>

obviously it’s not there because I don’t know how to put it, that’s why I’m asking it here.

---

<div class="post-metadata">

**Author:** ![printninja](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/printninja/32/481_2.png) [@printninja](https://forum.bootstrapstudio.io/u/printninja)\
**Post date:** [April 22, 2024, 10:16pm UTC](https://forum.bootstrapstudio.io/t/particle-effect-in-the-header/11270/4 "2024-04-22T22:16:20Z")

</div>

> [@Languedok](#):
>
> I’ve managed to get it to show, but the particle effect is going out of the image.

What is the “it” in “it to show”? What did you get to show? The way your post reads, it sounds like you’re saying you got something working, but it’s not working the way you’d like (going out of the image?)

I don’t see any “particle effect” on your page at all. Also the term “particle effect” is overly vague. It can mean countless different things. Here is a whole page of examples of different “particle effects.”

> **[10 Beautiful Examples of Particle Animation in Web Design](https://speckyboy.com/particle-animation-code-snippets/)**
>
> Taking the Web by storm, particle animations managed to carve out quite a niche for themselves several years ago. The massive current obsession with designs that have a high-tech vibe...

It’s impossible to advise you on how to add any kind of effect to your website if we can’t see an example of what you’re trying to achieve.

---

<div class="post-metadata">

**Author:** ![Languedok](https://forum.bootstrapstudio.io/letter_avatar_proxy/v4/letter/l/c2a13f/32.png) [@Languedok](https://forum.bootstrapstudio.io/u/Languedok)\
**Post date:** [April 23, 2024, 8:27am UTC](https://forum.bootstrapstudio.io/t/particle-effect-in-the-header/11270/5 "2024-04-23T08:27:08Z")

</div>

I have managed to get the particle effect to appear but it goes out from under the rocket image. How can I make it not to go out of the image? obviously in desktop and mobile mode.

---

<div class="post-metadata">

**Author:** ![richards](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/richards/32/3163_2.png) [@richards](https://forum.bootstrapstudio.io/u/richards)\
**Post date:** [April 23, 2024, 1:30pm UTC](https://forum.bootstrapstudio.io/t/particle-effect-in-the-header/11270/6 "2024-04-23T13:30:40Z")

</div>

@Languedok

In your masthead class add:

```auto
position: relative;

```

in your particles-js id change

```auto
height: 100vh;

```

to

```auto
height: 100%;

```

---

<div class="post-metadata">

**Author:** ![kuligaposten](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/kuligaposten/32/1190_2.png) [@kuligaposten](https://forum.bootstrapstudio.io/u/kuligaposten)\
**Post date:** [April 23, 2024, 3:32pm UTC](https://forum.bootstrapstudio.io/t/particle-effect-in-the-header/11270/7 "2024-04-23T15:32:08Z")

</div>

In your `PoliticaCookies.js` you have jQuery code but you don’t load jQuery  
You can change the code in `PoliticaCookies.js` to this and you don’t need jQuesry

```javascript
function getCookie(name) {
    const cookies = document.cookie.split(';');
    for (let i = 0; i < cookies.length; i++) {
        const cookie = cookies[i].trim();
        if (cookie.startsWith(name + '=')) {
            return cookie.substring(name.length + 1);
        }
    }
    return null;
}

function setCookie(name, value, days) {
    const date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    const expires = "expires=" + date.toUTCString();
    document.cookie = name + "=" + value + ";" + expires + ";path=/";
}

function eraseCookie(name) {
    document.cookie = name + '=; Max-Age=-99999999;';
}

function cookieConsent() {
    if (!getCookie('allowCookies')) {
        document.getElementById('cookies').style.display = 'block';
    } else {
        document.getElementById('cookies').style.display = 'none';
    }
    document.getElementById('cookies').classList.add('show');
}

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('btnDeny').addEventListener('click', function(e) {
        e.preventDefault();
        eraseCookie('allowCookies');
        document.getElementById('cookies').style.display = 'none';
    });

    document.getElementById('btnAccept').addEventListener('click', function(e) {
        e.preventDefault();
        setCookie('allowCookies', '1', 7);
        document.getElementById('cookies').style.display = 'none';
    });

    cookieConsent();
});

```

---

<div class="post-metadata">

**Author:** ![Languedok](https://forum.bootstrapstudio.io/letter_avatar_proxy/v4/letter/l/c2a13f/32.png) [@Languedok](https://forum.bootstrapstudio.io/u/Languedok)\
**Post date:** [April 23, 2024, 5:40pm UTC](https://forum.bootstrapstudio.io/t/particle-effect-in-the-header/11270/8 "2024-04-23T17:40:41Z")

</div>

thanks, it seems to be working perfectly 🙂