Customizing your page: Background 1 (sides of page)

As you may have figured out, your page is customizable! You may have already found the layouts section, and while they can be quite impressive, I think it's more fun to do it yourself! It took me a while to figure out how to do it, so I'll be posting about how to do different customizations.

When doing any type of simple styling on your page you should start with:

<style>

</style>

These tell the website that you're styling the page. The '/' tells it that it's the end of the styling. You'll want to put any of your code in between these two lines.

Next, you'll add code to tell the website where you're editing. For background on the sides it's called the body. You also need to add fancy brackets to this one, where you'll put more code later. It's almost like the part outside the brackets is the 'where' and inside is the 'what'.

For this part of your page you want to enter:

body {

}

(The placement of the brackets is how code is usually written. We just go with it lol.)

Next is telling the website what you're specifically changing. In this case it's the background, so within the brackets you'll enter:

background-color: 

   or

background-image: 

Obviously, use the first one for a colour and the second for a picture.

For a background colour you can either type in a basic colour, HEX number or RGB values. Since it's how I was taught, I'll be using HEX. To find a HEX colour, you can either use the one from google by searching "colour picker" or using a website. You'll want to copy this series of letters and numbers (including #) and add it to your code. Make sure to end every line of code of your 'what' with a semicolon (;) to tell the website you're done changing that part. Example:

background-color: black;

   or

background-color: #31702f;

For an image-background you first need to find a picture (you might have to try a few since they aren't always compatible). Then you'll add "url()" and copy and paste the image address into the brackets. Sometimes too, images can fill the page differently, depending on the website it's from or if you got the image address while in google still or on the website it's from. Here are two examples:

background-image: url(https://memes.co.in/wallpapers/uploads/1625830635.jpg);

   or

background-image: url(https://wallpapercave.com/wp/wp5586502.jpg);

The first picture is bigger, therefore takes up more space then the second picture (the second one is my background btw lol). Even though they are the same picture, they came from different websites, which affects their size. So feel free to play around with that fact.

For a black background the code should look like this:

<style>
body {
background-color: black;
}
</style>