Struggling to set a background image (Help appreciated)

HTML-CSS
3

You should download the image and crop it as needed. But you can kind of get away with using the URL parameters (fit=crop&h=&w=) and some positioning.

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
    background-image: linear-gradient(
    180deg,
    rgba(255, 69, 255, 0.6),
    rgba(255, 255, 255, 0)
  ),
    url(https://images.pexels.com/photos/1415131/pexels-photo-1415131.jpeg?auto=compress&cs=tinysrgb&dpr=3&fit=crop&h=750&w=860);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom right;
  height: 100%;
  width: 100%;
  z-index: -1;
}

If you do crop it, you should use something other than Google Drive for the host. You can pick an image host or you can use GitHub to host the image (forum post explaining how to use GitHub for the image).

BTW, you seem to have copied the example project code. That isn’t allowed. You should build your own form using your own code. You can look at the example and use bits and pieces but you can’t just copy the code and change the text.

1 Like