Struggling to set a background image (Help appreciated)

Hello,
I would like to get this image as my background image in the online survey project I’m currently doing.
And after setting it as the background I want to align it so that only this column;


of the whole photo shows as background, with the gradient I set, it is going to fit the theme like a glove!

The problems are:

  • I cannot get a decent link so that I can link it to my CSS file
  • Even if I could, I don’t really know how to align it properly

I have tried uploading the image to Google Drive and then link it from there to my CSS File but unfortunately did not work, it actually did work when I tried to embed it as an <img> element in HTML part, but just not as CSS. :smiling_face_with_tear:

I’m really frustrated, I would really appreciate some help…

And here, a gift for you! :smiley:

By the way, all feedbacks of the page are welcome!

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

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.