# (Squarespace) Film Grain Effect In Events Page

**URL:** <https://community.elfsight.com/t/squarespace-film-grain-effect-in-events-page/101989>\
**Category:** Platform Tips\
**Tags:** squarespace\
**Created:** [February 18, 2025, 2:37pm UTC](https://community.elfsight.com/t/squarespace-film-grain-effect-in-events-page/101989 "2025-02-18T14:37:32Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![tuanphan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/tuanphan/32/3165_2.png) [@tuanphan](https://community.elfsight.com/u/tuanphan)\
**Post date:** [February 18, 2025, 2:37pm UTC](https://community.elfsight.com/t/squarespace-film-grain-effect-in-events-page/101989/1 "2025-02-18T14:37:33Z")

</div>

To add Film grain effect in Events Page background image, you can follow these.

**#1.** Edit Event Page \> Add a Classic Editor Section.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/a/8/a8bfd59c8e9da14a33930b182362103e44ee5ead.jpeg)

Next, choose a Blank Section

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/a/8/a8ce842925ab93b1bd16132e187d55dbf6b808ce.jpeg)

**#2.** Next, edit Section \> Add Grain Effect

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/c/7/c767709546c5d15b947975eeb572181d4b94b46f.jpeg)

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/3/a/3a86dc97e48df7b309d61999da94f46329368fb1.jpeg)

We will have

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/9/6/96fd376ad22ee54e6fb552a2ba05ef3c48e81eba.jpeg)

**#3.** [Find ID](https://community.elfsight.com/t/how-to-find-id-in-squarespace/65340) of this Classic Section  
In my example, we will have: section[data-section-id=“67a9cee54c89a807345edad3”]

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/3/5/354772a61f732d7ea44f6f5539c652b02401393b.jpeg)

**#4.** Use this code to Custom CSS box  
If code doesn’t work, you can comment below, [message](https://community.elfsight.com/u/tuanphan/) or [email me](mailto:info@beaverhero.com).

```auto
/* Graint Effect */
section[data-section-id="67a9cee54c89a807345edad3"] {
   position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
   z-index: -1;
  min-height: unset !important;
  height: auto !important;
}
section.page-section:has(.eventlist-title) {
    .section-border, .section-background {
        background-color: transparent !important;
    }
}

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/8/0/808f4159f2845e9aa2ab4410fb8c2be1f425729d.jpeg)

**#5.** Next, use this code to Event Page Header Injection (or Code Injection \> Footer)

```auto
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.sqs-events-collection-list.events.events-list.events-stacked').appendTo('section[data-section-id="67a9cee54c89a807345edad3"] .content-wrapper .content');
});
</script>

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/e/a/eabca9f32e77ed1acdbf144d96a600c05d36ef5e.jpeg)

**#6.** Result

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/e/0/e0648ec47e25498e2d05f0ddf757e5e7f3486621.jpeg)