I spent about 3 hours googling to get this to work right so I hope you all appreciate lol

body { background-color: rgb(151,162,132)
; background-image: linear-gradient( to bottom, transparent , rgba(151,162,132,1) 60%
), url(*insert link here*); }

This is the code to automatically fade your background image into your background color.

Changing the percentage changes how hard the image fades, it's counter intuative but the higher the percetage the more visible the bottom line of the image is.

rgb values can be converted from HEX values using this site. The 1 in the second rgba(x,x,x,1) is to set the background color to full opacity, I wouldn't change it.

Make sure to insert your link and you're all set!

** Just found that the fade depends on the page length, so to guarantee it fades nicely 40% is better**

Arcturus Centre said:

And page name is page title. Like "My Stable" when you're on the "My Stable" page. <3 thank you so much for this- so helpful.

Eri Lowlands said:

I believe the sidebar is where it says "Chat" and "Quests" :D Thanks for making this!

Callaho Stud said:

This is so helpful! Thank you so very much!

The Unknown said:

Sticky Backgrounds

See my palette for what this looks like. It makes the background follow you as you scroll.

background-attachment: fixed;

That's your code. Paste it into the section the page background goes.

Fancy Navigation Bar Witchery

Do you want a fancy navigation bar? The code I'll give you results in this:

But you can experiment with other stuff.

You're going to want to paste the following under this section of the navbar code:

border: double;

border-width: 5px;

border-radius: 5px;

text-shadow: 2px 2px 5px black;

box-shadow: 2px 2px 5px black;

Copy/paste all that under the given section. Now, we have to do the gradient.

To do the gradient, all we do is paste the following under this section:

Paste the following in there:

background-image: linear-gradient(white, gray);