Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Problem with background image

  • 8 replies
  • 5 have this problem
  • 4107 views
  • Last reply by Star Light

more options

Normally, this code works well:

<style>

      #avata {
               background-image: url(http://s.gravatar.com/avatar/a1405f3b6d817e8073f7cdb433140a3e?s=128);
               background-size: 100%;
               background-repeat: no-repeat;
               display: block;
               border: 6px solid gray;
               height: 128px;
               width: 128px;
               transition: border-color 0.4s ease;
               -webkit-transition: border-color 0.4s ease
     }
     #avata:hover {border-color: orange}

</style>

But today, it suddenly become lost image. When I use F12, I have found out once problem. URL "http://s.gravatar.com/avatar/a1405f3b6d817e8073f7cdb433140a3e?s=128" has been changed to this "https://mozillawebmakerproxy.net/be27158d4e89335cc12be171d679139656280fcd?url=http://s.gravatar.com/avatar/a1405f3b6d817e8073f7cdb433140a3e?s=128" And image become disappear! I don't how to fix, could anyone give me a little help, plz?

Modified by Star Light

Chosen solution

I'm filing a bug about this issue.

Thanks

Read this answer in context 👍 0

All Replies (8)

more options

Try with Image Extensions like .jpg .png

Thimble thinks, its not an image link.

Even if you use the same code and save in .HTML file and run it, it won't come up.

more options

I don't think so, therefore, it was working very well until yesterday.

more options

Hi Star,

The problem is Thimble create everything inside the Frame, so the image link embedded with Mozilla Thimble, when it executes, the image is without extension so it becomes like URL not Image URL.

Try this below code

<style type="text/css">
     #avata {
   background-image:url(https://farm8.staticflickr.com/7098/13543892295_1061a347c0_m.jpg); 
              background-size: 100%;
              background-repeat: no-repeat;
              display: block;
              border: 6px solid gray;
              height: 128px;
              width: 128px;
              transition: border-color 0.4s ease;
              -webkit-transition: border-color 0.4s ease
    }

#avata:hover {border-color: orange} </style>

Modified by iamjayakumars

more options

I mean that code was working well in Thimble, but now it isn't. That mean, somehow Thimble was acceptation my code. I don't know why it doesn't accept it anymore.

=

Oh, I think I have found the error. When I change port it working again. Change from "http://" to "https://". Don't know why :p

Anyway, sorry for bother you. And thank you so much for helping me without complain :) - Please close this question. Sorry again for my stupid :p

Modified by Star Light

more options

Ha ha..

We are here to Support and help you.

Thanks :)

If this Question solved. Please Mark as Solution and close the thread

more options

Chosen Solution

I'm filing a bug about this issue.

Thanks

more options

Hi Star Light, The issue resolved. Try it now. Thanks

more options

Oh, it really back to normal. Thanks a lot, I know that you guys never let fans doubt.