Today I want to talk to you about CSS properties. There are dozens of properties that make up the styling for millions of sites. One in particular that can be commonly found on websites are called backgrounds. There are so many ways you can make changes to backgrounds but today I will be discussing these 3 variations: Images, Colors and Gradients.

If you remember Myspace and used to customize your own profile themes you may have stumbled across this CSS property. Changing background to an image is fairly easy. If you find an image online that you like, (Always be sure to credit images in your code if they are not your’ or get permission from the creator) all you have to do is insert the full url in between the parenthesis. If you hosting your own site you can also make use of applying the file path instead and upload your images from your computer to your site in a folder. Once you link that to your CSS, those images can be inserted too!

See the Pen
WqwXeB by Carolyne Cerka (@CCERKA)
on CodePen.

Of course, depending on the resolution of the image this can greatly affect the overall look of the site. If you are using a patterns that need to span the entirety of the page it will be important that you input “background-repeat” property to keep things consistent.

Next up, we have background colors! Now, these can also be combined with the background image or stand alone as a solid color. What makes this just as easy is that you can either insert HEX codes, RGB, or color keyword that CSS can default too. Heres an example

See the Pen pXbrbR by Carolyne Cerka (@CCERKA)on CodePen.

One thing that could greatly affect a users experience is the use of contrast. Always be cognizant what colors you are using, are they too bright? Does it effect the content or text on the screen? It will be really important to see where colors sit on top of components in your site. Be sure to check out a contrast checker online to see if you meet a good contrast ratio. Design with accessibility in mind!

And lastly, we have gradients! …And if you have been designing for a while, either you love them or you hate them (Or maybe something in between). As a background, I personally believe that subtlety is the way to go. What a gradient does is combined colors together to give something more depth…or make something visually interesting. One thing to pay attention to is the colors you combined. Nothing is more gross than combining two hex codes that make a gross shade of puke green. One site I really love using for inspiration is UI Gradients

See the Pen
gNMxLY by Carolyne Cerka (@CCERKA)
on CodePen.

Here a really great example of background gradient and colors on Symodd’s website

 

All in all, backgrounds can make or break a good webpage so use your colors images or gradients wisely! Sometimes a plain white, black or grey is all you need, explore colors that inspire you the most!