In this article we will go over different backgrounds and edit them to look like different things. Then, we use Google Chrome extension Eye Dropper to pick a color from a web page. Then, finishing up, we will show how it can be used in a browser game.
We are going to start by getting our Eye Dropper tool set up. In Chrome, click the three dots in the top right. Go to More Tools, click Extensions, search for Eye Dropper, and add the extension to your Chrome extensions. We can use this extension to grab a color from any website we want. This is a great way to incorporate great colors you find online into your web page.
Next head over to the Transparent Textures website.
To start off, just browse through the backgrounds and get a quick idea of the options, and then we will go over creating images, and making different backgrounds out of our images.
Now that you have seen some of the images let’s pick “Basketball” by Mike Hearn. When we click on it, you should notice it is not the color of a basketball. However, we can fix this. We can make it the color of a basketball. Go over to choose a color box. You will notice that if you know the exact color you can type it in (#802d00) and if it is the color that we want, it will now show the color of a basketball.
Lets say we do not have our exact color though. We can drag our dot and find the color. You can get the color you want and then customize it.
Walls made of Brick:
And now we can check out how to make a brick pattern, grab Benjamin Ward’s Brick Wall. This is a great background, due to the the many options we have here. You can have a couple real quick color themes:
What if we want a dark wall though, just grab Brick Wall Dark.
And if you want to lighten it up just change it to:
We are going to look at another one and use our Chrome Eye Dropper to get a custom color.
Grab Football (no yard lines) from Mike Hearn.
And the color for a normal football field is around: #2a7007.
Say we want a football field that is the color of a custom college football field, for our example Boise State. Here we have a picture of that iconic blue field. Grab your Eye Dropper and click pick color from web. Now hover over the blue area and then click it. It grabs the color for us (#144c79).
So we have seen some pretty awesome stuff from this. What if we want something that we don’t see?
You can change something to what you are trying to get for your background. Grab Asphalt Lite from Atle Mo.
If we want an asphalt background we change our color to: #000000 and call it complete.
Our we can use this to create a space background.
I used this in a game I built:
When you get whatever pattern you want, grab the CSS code provided and assign it to a body tag, or a div tag. You can use class or id to specify which div.
Quick Start Guide:
Now we can look at other patterns and a quick start color for each of our patterns. A short quick start guide if you will.
Dark Wood – Omar Alvarado #541d0d
Dust – Dominik Kiss #783407
Foggy Birds – Pete Fecteau #09449c
Fresh Snow – Kerstkaarten #857481
Gravel – Mike Hearn #937b7b
Gray Floral – Lauren #eb7e7b
Green Dust And Scratches – Atle Mo #354f33
Inspiration Geometry – Welsey #000000
Light Sketch – Dan Kruse #000000
Purty Wood – Richard Tabor #2e1c00
Shley Tree1 – Derek Ramsey #2e1c00
This is just a few ideas and some color ideas I created. You can use whatever colors you like. Now that you have this as a tool I will show you what you can create with this, and what you can create with Bootstrap and Pexels, which we will learn in our next article.
Keep learning and if you have any questions, comments, or if you find awesome colors and patterns send them to me on Twitter. I enjoy seeing cool stuff people build!
YouTube Video to this Tutorial: