MagicPattern CSS Backgrounds!

[hisashi.fujita]

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
}

[Uzo]

is still not working you missing code on top

[Uzo]

Bingo!!!

[Uzo]

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;

[Pablo_books]

<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;

[Uzo]

[hisashi.fujita]

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

[Uzo]

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

Code Book

[shej]

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

[Uzo]

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

[Pablo_books]

That blog is gonna look amazing, no doubt!

[shej]

Yayyy!!

[Uzo]

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

[shej]

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

[shej]

He meant that to me

[hisashi.fujita]

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?

[Uzo]

hahahahahah… looks like you should be a detective ! lol

[Joe_Gabriele]

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
journey.rs/creina_diary
journey.rs/kylienathan_

[Lucas_Pires]

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

PS: Also tried removing nav and tab bar.

[Rosewebstudio]

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