assign background image from url-CodePudding

I am trying to place a background image to a tag, when I set the image link in background-image:url it is not showing me the image as background. This is my code, what could I be doing wrong?

<a
  href="#"
  data-toggle="lightbox"
  title="Instagram"
  style="
    width: 400px;
    height: 400px;
    background-image: url('https://scontent-atl3-2.cdninstagram.com/v/t51.2885-15/275180538_484682353010222_2402478995051705385_n.jpg?stp=dst-jpg_e35_s640x640_sh0.08&_nc_ht=scontent-atl3-2.cdninstagram.com&_nc_cat=102&_nc_ohc=fTObVsU65g8AX8x2Wuy&edm=ABfd0MgBAAAA&ccb=7-4&oh=00_AT-oNSMzXpDYHz0_nSlywYBoscNl37e8kWF8dEe3-4zxWA&oe=625818CB&_nc_sid=7bff83') !important;
  "
>
  <div >
    <span>Instagram223424</span>
  </div>
</a>

CodePudding user response：

I Assume you are trying to load image from instagram or facebook content because of the URL. It is not allowed to be load like that, try saving the image locally that's the quickest solution.

CodePudding user response：

I will only recommend you to assign the background image locally. First, download the image and then, add it to your code main file. The main problem while you import the url is, if the image of the url is deleted by any reasons, your webpage will not display the image anymore. So, you should download it and then add it to your code main file. Then, rename the picture to a short name (recommended). Then you should code like this