# MagicPattern CSS Backgrounds!

**URL:** <https://community.glideapps.com/t/magicpattern-css-backgrounds/17352>\
**Category:** Community Resources\
**Created:** [October 20, 2020, 6:36am UTC](https://community.glideapps.com/t/magicpattern-css-backgrounds/17352 "2020-10-20T06:36:11Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)\
**Post date:** [January 30, 2021, 8:33am UTC](https://community.glideapps.com/t/magicpattern-css-backgrounds/17352/21 "2021-01-30T08:33:11Z")

</div>

![スクリーンショット 2021-01-30 17.29.42](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/6/36a16b0084c855e84aedcb3ce99d5e47fd829241.jpeg)

Try using this code.

```
<div class="background"></div>
<pre><span><style>
.background {
position:fixed;
margin-top:0;
width:100%;
height:100%;
top:0;
right:0;
z-index:-1;
/*-----Paste the CSS below this.-----*/
background-color: #f7f7e6;
opacity: 0.5;
background-image: linear-gradient(135deg, #f7a845 25%, transparent 25%), linear-gradient(225deg, #f7a845 25%, transparent 25%), linear-gradient(45deg, #f7a845 25%, transparent 25%), linear-gradient(315deg, #f7a845 25%, #f7f7e6 25%);
background-position: 8px 0, 8px 0, 0 0, 0 0;
background-size: 16px 16px;
background-repeat: repeat;z
}
```

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [January 30, 2021, 8:35am UTC](https://community.glideapps.com/t/magicpattern-css-backgrounds/17352/22 "2021-01-30T08:35:01Z")

</div>

is still not working you missing code on top

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [January 30, 2021, 8:36am UTC](https://community.glideapps.com/t/magicpattern-css-backgrounds/17352/23 "2021-01-30T08:36:44Z")

</div>

Bingo!!!

 ![Proposal 2021-01-30 at 3.35.54 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/9/19514d5d33b6a7a3caee51a088b74df9616fd74a.jpeg)

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [January 30, 2021, 8:40am UTC](https://community.glideapps.com/t/magicpattern-css-backgrounds/17352/24 "2021-01-30T08:40:53Z")

</div>

bot how to change this code to work??? i copy from that website…

background-color: #E5E5F7;  
opacity: 0.4;  
background-image: radial-gradient(circle at center center, #444CF7, #E5E5F7), repeating-radial-gradient(circle at center center, #444CF7, #444CF7, 20px, transparent 40px, transparent 20px);  
background-blend-mode: multiply;

---

<div class="post-metadata">

**Author:** ![Pablo\_books](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pablo_books/32/2110_2.png) [@Pablo\_books](https://community.glideapps.com/u/Pablo_books)\
**Post date:** [January 30, 2021, 8:42am UTC](https://community.glideapps.com/t/magicpattern-css-backgrounds/17352/25 "2021-01-30T08:42:40Z")

</div>

```auto
<div class="background"></div>
<pre><span><style>
.background {
position:fixed;
margin-top:0;
width:100%;
height:100%;
top:0;
right:0;
z-index:-1;
background-color: #E5E5F7;
opacity: 0.4;
background-image: radial-gradient(circle at center center, #444CF7, #E5E5F7), repeating-radial-gradient(circle at center center, #444CF7, #444CF7, 20px, transparent 40px, transparent 20px);
background-blend-mode: multiply;

```

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [January 30, 2021, 8:43am UTC](https://community.glideapps.com/t/magicpattern-css-backgrounds/17352/26 "2021-01-30T08:43:46Z")

</div>

![Proposal 2021-01-30 at 3.43.07 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/0/3036381289ed33d1f7968eb4cdd64b4432935fc7.jpeg)

---

<div class="post-metadata">

**Author:** ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)\
**Post date:** [January 30, 2021, 8:45am UTC](https://community.glideapps.com/t/magicpattern-css-backgrounds/17352/27 "2021-01-30T08:45:14Z")

</div>

In the code I sent  
/ \* ----- Paste the CSS below this .----- \* /  
Replace the CSS below with your CSS.

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [January 30, 2021, 8:47am UTC](https://community.glideapps.com/t/magicpattern-css-backgrounds/17352/28 "2021-01-30T08:47:03Z")

</div>

thank you guys so much, this is link to my app where i post it for easy acces

> **[Code Book](https://code-book.glideapp.io/dl/ewAiAHQAIgA6ADEALAAiAHMAIgA6ACIAYwBsAGEAcwBzAC0AYwBvAGQAZQBzACIALAAiAHIAIgA6ACIAagAxADcAUgB6AFoASQBCAFEAeABPAEoAcgB3ADYAYgB3AE8AbQBKAEQAQQAiACwAIgBuACIAOgAiAEMAUwBTACAAYwBvAGQAZQAiAH0A)**
>
> share cool codes, scripts and links

---

<div class="post-metadata">

**Author:** ![shej](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/shej/32/20783_2.png) [@shej](https://community.glideapps.com/u/shej)\
**Post date:** [January 30, 2021, 8:48am UTC](https://community.glideapps.com/t/magicpattern-css-backgrounds/17352/29 "2021-01-30T08:48:14Z")

</div>

The more I stay here, the more I am loving this community. So many talents and the only super responsive community I have found 🤩

Building blog site, copying this code 😍

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [January 30, 2021, 8:48am UTC](https://community.glideapps.com/t/magicpattern-css-backgrounds/17352/30 "2021-01-30T08:48:42Z")

</div>

oh… i see… i missed that! cool… thank you  
I’m learning a lot!

---

<div class="post-metadata">

**Author:** ![Pablo\_books](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pablo_books/32/2110_2.png) [@Pablo\_books](https://community.glideapps.com/u/Pablo_books)\
**Post date:** [January 30, 2021, 8:48am UTC](https://community.glideapps.com/t/magicpattern-css-backgrounds/17352/31 "2021-01-30T08:48:54Z")

</div>

That blog is gonna look amazing, no doubt! 🤩

---

<div class="post-metadata">

**Author:** ![shej](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/shej/32/20783_2.png) [@shej](https://community.glideapps.com/u/shej)\
**Post date:** [January 30, 2021, 8:49am UTC](https://community.glideapps.com/t/magicpattern-css-backgrounds/17352/32 "2021-01-30T08:49:55Z")

</div>

Yayyy!! 😊

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [January 30, 2021, 8:51am UTC](https://community.glideapps.com/t/magicpattern-css-backgrounds/17352/33 "2021-01-30T08:51:25Z")

</div>

just don’t make fun of the girl in that pictures… she is my niece 😉

---

<div class="post-metadata">

**Author:** ![shej](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/shej/32/20783_2.png) [@shej](https://community.glideapps.com/u/shej)\
**Post date:** [January 30, 2021, 8:56am UTC](https://community.glideapps.com/t/magicpattern-css-backgrounds/17352/35 "2021-01-30T08:56:32Z")

</div>

I guess he is talking about his app. The girl in that pic 🙈

---

<div class="post-metadata">

**Author:** ![shej](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/shej/32/20783_2.png) [@shej](https://community.glideapps.com/u/shej)\
**Post date:** [January 30, 2021, 8:58am UTC](https://community.glideapps.com/t/magicpattern-css-backgrounds/17352/36 "2021-01-30T08:58:03Z")

</div>

He meant that to me 🙈

---

<div class="post-metadata">

**Author:** ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)\
**Post date:** [January 30, 2021, 9:04am UTC](https://community.glideapps.com/t/magicpattern-css-backgrounds/17352/37 "2021-01-30T09:04:40Z")

</div>

I see!  
If you take a closer look, you’ll find that Uzo and his niece have similar facial features.

Anyway…  
Uzo’s niece is a very beautiful woman.  
Everyone, that’s right, right?

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [January 30, 2021, 9:31am UTC](https://community.glideapps.com/t/magicpattern-css-backgrounds/17352/38 "2021-01-30T09:31:58Z")

</div>

hahahahahah… looks like you should be a detective ! lol

---

<div class="post-metadata">

**Author:** ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)\
**Post date:** [May 8, 2021, 6:41pm UTC](https://community.glideapps.com/t/magicpattern-css-backgrounds/17352/39 "2021-05-08T18:41:04Z")

</div>

Thanks to this thread, I was able to also create custom backgrounds! The code is slightly different than above.

```
<div class="background"></div>
<pre><span><style>
.background {
position: fixed;
margin-top:0;
width: 100%;
height:100%;
top:0;
right:0; 
left: 0%;
z-index:-100;
filter: brightness(50%);
background-image: url("URL"); 
background-size: cover;
background-position: center center;
}

```

Inside my User’s sheet I used a Single Value Column to call this HTML and then a Template Column to Inject the Background Image URL into the Single Value Column.

I also created some Text Color HTML to become white and used an ITE Column to use White Font if someone uploaded a background image, if not keep it black.

You can see some examples here:

[journey.rs/sightseeing\_withshy](https://journey.rs/sightseeing_withshy)  
[journey.rs/creina\_diary](https://journey.rs/creina_diary)  
[journey.rs/kylienathan\_](https://journey.rs/kylienathan_)

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [May 9, 2021, 3:06am UTC](https://community.glideapps.com/t/magicpattern-css-backgrounds/17352/40 "2021-05-09T03:06:49Z")

</div>

Tested with an image here and **wow** … thanks for this! 🤩

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/a/fab2a79bb25c29613265d645c7b90612b0c4b265.jpeg)

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/5/154d033316321f149b03d5fa923123bb4dcf5b13.jpeg)

> _PS: Also tried removing nav and tab bar._

---

<div class="post-metadata">

**Author:** ![Rosewebstudio](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/rosewebstudio/32/12261_2.png) [@Rosewebstudio](https://community.glideapps.com/u/Rosewebstudio)\
**Post date:** [May 9, 2021, 3:56am UTC](https://community.glideapps.com/t/magicpattern-css-backgrounds/17352/41 "2021-05-09T03:56:57Z")

</div>

Thanks @Joe_Gabriele. That’s is pretty neat! Like it 👍

[Previous page](https://community.glideapps.com/t/magicpattern-css-backgrounds/17352.md?page=1)

[Next page](https://community.glideapps.com/t/magicpattern-css-backgrounds/17352.md?page=3)