Load instagram image from URL as a BACKGROUND image

Question

I can easily grab an Instagram image from its URL by adding /media/?size=l to the end, ie:

https://www.instagram.com/p/BP73IwIABjh/media/?size=l 

leads to 

https://scontent-lhr8-2.cdninstagram.com/v/t51.2885-15/e35/16228593_1671098819857382_4895739311250472960_n.jpg?tp=1&_nc_ht=scontent-lhr8-2.cdninstagram.com&_nc_cat=102&_nc_ohc=CWyp6r9aeMkAX_yPiOL&edm=AGenrX8BAAAA&ccb=7-4&oh=5674d672622792f99bc091026f209fad&oe=60BFF349&_nc_sid=5eceaa

This works great BUT I want to use this image as a background on my website. But without going to the URL nothing gets pulled. ie

<li style="background: #ebeefc url(https://www.instagram.com/p/BP73IwIABjh/media/?size=l) center center no-repeat;background-size:cover;">

This doesn't work and only shows the background color #ebeefc

Is it possible to load the background image from the instagram URL, or maybe use a wee bit of javascript to preload the images and pull the forwarded URL instead? I would use the instagram API, but it doesn't seem possible to pull images that way by only using a post URL.

Any ideas welcome.

Answer 1

You will have to use instagram's API.

If you read in the web page of your link it says

This endpoint is deprecated. Please read https://developers.facebook.com/docs/instagram/oembed to learn how to migrate your endpoint.

Or you could download the image and store it yourself. I also recommend you something like https://imgur.com/ if you want to have an only storage for your image.