Let’s talk about simple backgrounds that you can use on your website! You probably test a lot of backgrounds when creating a new page, so this cheat sheet will help you pick the one that suits you best.
Changing the background
First, for the beginners, you mainly have 3 ways to change the background of a web page:
Using HTML, search for “<body” in your HTML file:
<body style="background-color:blue;">
...
</body>Using CSS, add a “body” block if it doesn’t exist already in your CSS file (or inside a <style> tag in HTML):
body {
background-color: "blue";
}Not so common, but an option nonetheless, is using JavaScript. Just add this line to your JS file (or inside a <script> tag in HTML):
document.body.style.backgroundColor = "blue";Note: Check out all the background properties you can use here
You can also use backgrounds on many types of elements in HTML, such as <div>, <table>, etc… Give it a try!
Let’s now move on to the list of backgrounds you won’t regret using!
Basic backgrounds
We’ll be using CSS to show off the different background styles, but you’re able to adapt them to HTML or JS (if you really want to).
Solid color
body {
background-color: "blue";
}Example Website: Google
Gradient backgrounds (linear)
body {
background: cyan; /* fallback color */
background: linear-gradient(90deg, blue 0%, cyan 100%);
}Example Website: Spotify
Gradient backgrounds (radial)
body {
background: cyan; /* fallback color */
background: radial-gradient(circle at center, red 0, cyan 100%);
}Background with image
body {
background-color: white; /* needed to cover the parts that the image doesn't */
background-image: url('bottom-image-example.jpg');
background-repeat: no-repeat;
background-size: contain; /* make the image responsive */
background-position: center bottom; /* "center top" is also common to use*/
}Example: Linkedin (bottom), Amazon (top)
Image pattern background
body {
background-image: url('pattern-example.jpg');
background-repeat: repeat;
}Note: A good tool you can use for icon pattern backgrounds like this one is patternico
Example: Whatsapp (inside the messenger)
Image covering the background
body {
background-image: url('cover-image-example.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center top;
}Example: Tumblr
Fixed image covering the background
body {
background-image: url('cover-image-example.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-attachment: fixed; /* always relative to the viewport */
}Example: Quora
Advanced backgrounds
You won’t be able to use these backgrounds with the HTML option. The best way is to use CSS for these.
Animated solid background
body {
background-color: blue;
animation: animatedSolidBg 30s linear infinite; /* change the animation time here */
}
@keyframes animatedSolidBg {
0%{background-color: blue}
50%{background-color: cyan}
100%{background-color: blue}
}Animated gradient background
body {
background: linear-gradient(135deg, blue, cyan, yellow); /* change the colors and angles here */
background-size: 500% 500%;
animation: animatedGradientBg 40s ease infinite; /* change the animation time here */
}
@keyframes animatedGradientBg {
0%{background-position:0% 0%}
50%{background-position:100% 100%}
100%{background-position:0% 0%}
}There are plenty of more ways to make backgrounds interesting. You could, for example, generate random colors for the background using JavaScript. You could also use libraries such as particles.js to have an awesome background.
A word of advice, though: most of the time, you want to stick to the more simple ones because, well, a background is a background. It’s meant not to call too much attention to the user, so bear it in mind.
As always, if you have any questions or something of the sort, reply to this post, I’ll be sure to reply back!
The Crash Course on Node Redis
Generating Random Colors in JS + Dark, Light colors
