CSS url() not accepting URLs with end slashes

Issue

I'm trying to add a background image using an image URL. When I use, for example, (https://www.pexels.com/photo/black-suv-on-snow-covered-ground-11001379/) the image doesn't show , but when I use (https://newevolutiondesigns.com/images/freebies/hd-wallpaper-1.jpg) the image does.

I have no idea why this happens.

.container {

 background: linear-gradient(transparent 10%, #20283c 90%), url("https://www.pexels.com/photo/black-suv-on-snow-covered-ground-11001379/") no-repeat;
 background-repeat: no-repeat;
 background-position: center center;
 background-attachment: "fixed";
 background-size: cover;
 background-attachment: fixed;
}

Solution

https://www.pexels.com/photo/black-suv-on-snow-covered-ground-11001379/

Is not an image URL, it's a website.

The image URL of the actual image is ...

https://images.pexels.com/photos/11001379/pexels-photo-11001379.jpeg

The url property needs a url pointing to an actual image file.

Answered By - James McGlone