X
Tap here to go to the mobile version of the site.

Support Forum

Problem with background image

Posted

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?

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

Additional System Details

Application

  • User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.154 Safari/537.36

More Information

iamjayakumars 489 solutions 5951 answers

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.

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.

Question owner

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

I don't think so, therefore, it was working very well until yesterday.
iamjayakumars 489 solutions 5951 answers

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>

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

Question owner

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

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

iamjayakumars 489 solutions 5951 answers

Ha ha..

We are here to Support and help you.

Thanks :)

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

Ha ha.. We are here to Support and help you. Thanks :) If this Question solved. Please Mark as Solution and close the thread
iamjayakumars 489 solutions 5951 answers

Chosen Solution

I'm filing a bug about this issue.

Thanks

I'm filing a bug about this issue. Thanks
iamjayakumars 489 solutions 5951 answers

Helpful Reply

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

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

Question owner

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

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