Creating a Website 06: Gradient Image

[Mimi58]

The background image for the "flourish" template is a gradient image. If you want to use the template and already have a different kind of background image you want to use, you could save it to the images folder in the "flourish" template folder and then make a little change in the code.

However, if you like the idea of a gradient image background, you can make a new gradient or change the color of the original.

These directions are for using pixlr.com/editor, but you can use the editor of your choice. Note:
These instructions may not work with the new editor Pixlr is introducing, but should be similar to what you would do with Gimp or Photoshop.

One way to change the colors of the gradient:

1. Upload "img02" from the images folder to the editor on Pixlr.com https://pixlr.com/editor/
2. Click on the image to be sure it is active.
3. Go to "Edit' and click "Select All". Then go to Edit and click, "copy"
4. Go to "File" and click, "New Image"
5. When "New Image" popup box appears, put a check mark by "Create image from Clipboard", then click "OK'

You can repeat until you have 3 or 4 new images if you are wanting to test out some various color schemes.

6. Now, to change the color of the image, go to "Adjustment" --> "Hue and Saturation" Move the slider under "Hue" until you find a color you like and click, "OK'
7. Click to make another image active. Go to "Adjustment" --> "Hue and Saturation" Move the slider under "Hue" until you find a new color you want to try.
8. Repeat until you have all the image you uploaded and all the copies changed to a different color. (You should already have moved the original image to the "images 2" folder.)

Now we are going to see what the backgrounds we made look like in the template.

9. Keep the window open that has what you've done at Pixlr. Open a new browser window and navigate the the "flourish" folder. Open the "index.html" file. You should see the template with the original colored background.

One at a time, we are going to save the images and see what they look like in the template, so:

10. Click on an image to make it active.
11. Go to "File" --> save. A popup will appear.
12. Put - img02 - for the name. It started out as a png, so be sure the format dropdown shows it is saving it in the PNG format
13. Click "OK'
14. Another popup will appear for you to navigate to the images folder in the "flourish" template on your computer. Click to save and replace the img02 that was there.
15. Now, refresh the window that is showing the template. You should see a different color background.

You will also see the original color at the bottom of the page. That's because the background image doesn't cover the whole background, so the background color shows at the bottom. But, that can be easily changed in the code to match the bottom of the background image you choose.

Repeat the steps above to save a different gradient you made and test it in the index.html page.

If and when you find a color you like, you can leave it in the images folder (or go back and re-save the one you like the best to the images folder in the "flourish" template folder.) If you think you might want to use the other gradients in the future, you can save them with different names to a folder for website backgrounds or wherever you want.

Next, we will look at the code we need to change to use a different repeating image or to change the background color.

Here are examples of the gradients I made using this method: