HTML Background

Learn how to add background images, colour and gradients to a web page.

The background of an HTML element can be set using the "background" property in CSS. There are several ways to specify the background, including color, image, and gradient.

To set a solid color background, you can use the "background-color" property, like this:

body {
  background color: light blue;
}

To set a background image, you can use the "background-image" property, like this:

body {
  background-image: URL("your-image.jpg");
}

You can also specify how the background image should be repeated, or whether it should be fixed in place or scroll with the rest of the page, using the "background-repeat", "background-attachment", and "background-position" properties.

For example, to make the background image repeat horizontally and vertically, and to make it scroll with the rest of the page, you can do the following:

body {
  background-image: URL("your-image.jpg");
  background-repeat: repeat;
  background-attachment: scroll;
  background-position: centre;
}

Gradients can be set as background using CSS linear-gradient or radial-gradient functions. For example:

 body {
  background: linear-gradient(to bottom, light blue, white);
}

Note that some older browsers may not support all of these background properties, so you may need to use vendor prefixes or other techniques to ensure compatibility.