-2

I have been having this problem throughout all of my projects recently. Basically, the background images that I link in my css only display if I have visited the link explicitly in the browser I am using. Once the link has been visited they display without issue. All of the images I have been using are ones I have uploaded to imgur.

Initally I thought it may be a configuration issue with imgur but I've changed all of my sharing options to public and am still having the same issue.

Here is the link to a codepen that shows the problem and below is an example of how I am linking the background images.

.goStat{
  border:1px solid rgb(180,80,80);
  box-shadow:0px 3px rgb(100,100,100);
  background-color:rgb(180,80,80);
  background-image:url("http://i.imgur.com/zdUjxxq.png");
}

There should be images shown within the top red button and three bottom bubble buttons shown in the display but none of them appear unless you visit the links. Have no clue why this happens and would really appreciate some clarification.

Christian Rosa
  • 25
  • 1
  • 6
  • 3
    Maybe they have a restriction on linking to their images. Why not host your own images, or use a server that is designed for this purpose? I don't think imgur would be a good platform for hosting images for websites... –  Feb 11 '16 at 22:28
  • 1
    It's definitely a permissions issue. See here: http://i.imgur.com/ps7XShM.png – Joseph Marikle Feb 11 '16 at 22:28
  • Yep permissions. Here's from Imgur: Status Code: 403 Forbidden. You don't have access to this action. If you're getting this error, check that you haven't run out of API credits or make sure you're sending the OAuth headers correctly and have valid tokens/secrets. –  Feb 11 '16 at 22:35
  • Thanks guys. How would I go about hosting my own images? Also any suggestions for sites that are designed for this purpose? – Christian Rosa Feb 12 '16 at 03:46

2 Answers2

0

It seems there is a prohibition for "hot-linking". Several sites do not allow it, because it is considered "traffic theft". One will use their bandwidth without any reference to their site and no advantages.

user3357198
  • 28
  • 5
0

Try adding background-repeat:repeat as shown below:

`.goStat{
  border:1px solid rgb(180,80,80);
  box-shadow:0px 3px rgb(100,100,100);
  background-color:rgb(180,80,80);
  background-image:url("http://i.imgur.com/zdUjxxq.png");
 background-repeat:repeat
}`

It sounds like this is a common problem and the two threads below may be helpful if the above solution doesn't work.

why is the background image not showing here?

Imgur images not showing up in JSFiddle

Community
  • 1
  • 1