Ask Your Question
0

What is the CSS code to add a full-page background image behind or under a form, without the use of the style tag in HTML?

asked 2021-05-01 11:00:00 +0000

lakamha gravatar image

edit retag flag offensive close merge delete

1 Answer

Sort by ยป oldest newest most voted
3

answered 2021-04-24 20:00:00 +0000

nofretete gravatar image

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.

edit flag offensive delete link more

Your Answer

Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss

Add Answer


Question Tools

Stats

Asked: 2021-05-01 11:00:00 +0000

Seen: 8 times

Last updated: Apr 24 '21