Revision history [back]

To add a full-page background image behind or under a form using CSS, you can use the following code:

body {
  background-image: url('path/to/image.jpg');
  background-size: cover;
  background-position: center center;
}

form {
  background-color: rgba(255, 255, 255, 0.75);
  /* set the opacity of the form background to make the image visible behind it */
  padding: 20px;
  margin: 0 auto;
  max-width: 600px;
}

In this code, the background-image property sets the URL of the background image. The background-size property is set to cover to ensure the image covers the entire page. The background-position property centers the image both horizontally and vertically.

The form element is given a background-color with a low opacity using the rgba() color notation. This allows the background image to show through behind the form. The form is also centered and given some padding and a maximum width using other CSS properties.