Table of Contents
A pretty easy and fast way to add a bit of flavor to your pages is to give it a background of some kind. Whether that background is a color, an image, or a gradient, a background makes a big difference in how your website looks. The two main way to change the background of your website is to change the background color or background image. We'll cover both of these below.
This is the easiest way to change your page's background color from the default white. You just pick a color with
background-color and let the browser do the rest like this:
Example of background color.
You can replace
light-gray with any color, and it will also work just fine. Examples of web safe colors include
When you want to use an image instead of color for your background, you can use the
background-image property. This property takes a URL to an image, and the browser will use that image as the background.
Let's say you want this image as your background:
A cute puppy.
The CSS might look like this:
And your page like this:
A cute puppy as your background image.
Background Image Repetition
For images where you might want to repeat it over and over again as the background, you can specify just that. The property for this is
background-repeat and below are the valid values for this:
repeat: This repeats the image both on the x and the y-axis.
repeat-x: This repeats the image on the y-axis.
repeat-y: This repeats the image on the x-axis.
no-repeat: This renders a single image without any repetition.
Background images can be repeated in any of the four directions, so you can use this to make a background image that repeats in both the x and y-axis.
Background Image Position
In case you don't want your background image to repeat, perhaps you then want to control where on the screen it will be rendered. By default, it will render from the top left corner, but you can specify otherwise using the
background-position property. The property takes two values, the first is the x-axis and the second is the y-axis.
The main values for this property are
center, but you can also use lengths in the form of
background-position: x y;.
Below are some valid values for
background-position: 40% 70%;
background-position: right top;
background-position: left center;
background-position: right bottom;
background-position: 2rem 5rem;
Background Image Size
Let's say you want to change the size of your background image. Use the
background-size CSS property for this.
You are free to give it a new width and height to set the image to, like so:
background-size: 250px 300px;
background-size: 70% 90%;
In the common case where you want the image to stretch and take up the entire window while respecting the image's ratio, you can use the
When you don't want to use a solid color, using gradients is a simple way to use multiple colors on your page while allowing the browser to render all the colors in between.
The most simple of gradients are linear gradients. For example, here is a basic blue to purple gradient:
background: linear-gradient(blue, purple);
A blue to purple linear gradient.
If you don't want your linear gradients to go from top to bottom, you can assign a direction value. If you give the property a degrees value, it will render it at that angle.
Here is how it looks like when you render at a 90-degree angle:
background: linear-gradient(90deg, blue, purple);
A blue to purple angled linear gradient.
Gradients can also be used to create radial gradients. Radial gradients are similar to linear gradients, but instead of using two colors, you can use a single color and a radius. Radial gradients are rendered in the form of a circle. To demonstrate, here is a radial gradient using the same colors as before:
background: radial-gradient(blue, purple);
A blue to purple radial gradient.
When done right, gradients can be a very tasteful way to spruce up your page! You can use the
background-size property to control the size of the gradient and the
background-position property to control where it is rendered.
- Create an RSS Reader in Node
- Best Visual Studio Code Extensions for 2022
- How to deploy an Express app using Docker
- How to deploy a Node app using Docker
- Using Puppeteer and Jest for End-to-End Testing
- Getting Started with Handlebars.js
- Creating a Twitter bot with Node.js
- Getting Started with React
- Getting Started with Vuex: Managing State in Vue
- Setting Up a Local Web Server using Node.js
- Getting Started with Moon.js