Coding has always intrigued me. I've taken coding in college and wanted to become a programmer, but life got in the way and I fell off that path. So distraught on that fact, I had decided to get back on this old journey that has been both exhilarating and challenging. From forgetting about how to code from my college years, to over working myself to death at work and ending up in the hospital during this journey (Yay, stress and adulting~!), to trying to catch back up and cramming everything in my head in one go.

I've gotten a bit more comfortable with coding, but I can't say I can do it without googling everything at this point. It's still fresh in my head, but I'll tell you now, there may be some easy words that you see, but they have bigger meanings.

For example, with my recent project for my class I'm taking. I was struggling with trying to set backgrounds. Now, to even remember how to do this, I had to dig back into my memories from my days adding code to my xanga, myspace, livejournal, etc. To be frank, digging into my memories didn't work out cause I'm too old to remember that. So I just asked Google or if I could, I would AskJeeves.

So let's start off:

All of the code below will be using CSS for the examples.

Background Colors:

Setting a background color is the most basic and straightforward way to style the background of an element.

.element {
  background-color: #f1f1f1; 
}

You can specify the color using various formats such as hexadecimal, RGB, or color names.

Background Images:

Adding background images can bring life and creativity to your web pages. You can use your own images or choose from a vast collection of royalty-free images online. I've seen .gifs used, and though it's nice to have a moving picture, be wary of flashing effects that could pose a health risk to your user. In this case, I used an image that I posted on Reddit of my dog.

.element {
  background-image: url("https://rb.gy/dipna");
  background-repeat: no-repeat;
  background-size: cover; 
  height: 100vh; 
}

In the url() area, you can just place a URL that leads to the image you want. The background-repeat property ensures that the image doesn't repeat, while background-size controls how the image fits within the element. The height is sized so that the image fits within the window.

Background Gradients:

Gradients offer a dynamic and eye-catching background effect by blending multiple colors seamlessly.

.element {
  background-image: linear-gradient(to right, #ff9a9e, #fad0c4);
}

In the above code, we define a linear gradient from left to right, starting with #ff9a9e and ending with #fad0c4. You can experiment with different gradient directions and color combinations to achieve the desired effect.

Background Properties and Shorthand:

CSS offers additional properties to further customize backgrounds. Commonly used properties include background-position to control the position of the background image, background-size to adjust the size of the background, and background-repeat to specify whether the background should repeat or not.

.element {
  background: url("https://rb.gy/dipna") no-repeat center/cover;
}

In the above code, no-repeat prevents the background image from repeating, center horizontally aligns the image, and cover ensures the image covers the entire element.

So, setting backgrounds in code opens up a world of creative possibilities for web developers. By using colors, images, gradients, and various CSS properties, we can transform the look and feel of our web pages. Hopefully, I can start retaining more of this information in my head and not have to google it constantly to remember.