Help get this topic noticed by sharing it on Twitter, Facebook, or email.

Difficulty linking to custom image using CSS background-image attribute.

I've uploaded my custom icons used in my social media buttons. These use CSS to display the icon.

e.g. while testing locally I use this for facebook:

a.sb.facebook,
.sb a.facebook {
background-image: url(images/facebook.png);
}

After I upload to my webstore Theme folder I see that its URL should be below when I select it in File Browser page:
/media/Site Files/Theme Files/Active Theme/Images/icons/facebook.png

So I tried:

a.sb.facebook,
.sb a.facebook {
background-image: url(/media/Site Files/Theme Files/Active Theme/Images/icons/facebook.png);
}

and many different variations that I could think of. NONE WORKED.

It was only after I used the Image Widget to embed the icon momentarily, preview it in the page and then copying the generated URL link which was: http://ecx.images-amazon.com/images/I... was I able to actually figure out that Amazon generates these dynamically.

so I ended up doing this:

a.sb.facebook,
.sb a.facebook {
background-image: url("http://ecx.images-amazon.com/images/I...;
}

So my question is... why doesn't below work ?

a.sb.facebook,
.sb a.facebook {
background-image: url(/media/Site Files/Theme Files/Active Theme/Images/icons/facebook.png);
}

thanks

Now the only way I can actually access my "faceboo
1 person has
this problem
+1
Reply
  • could you please provide a link to your webstore?
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited sad, anxious, confused, frustrated indifferent, undecided, unconcerned kidding, amused, unsure, silly

  • Andrew (Official Rep) May 16, 2012 08:45
    Hi there!

    I've checked your webstore briefly and noticed a few things out there:

    javascripts - you cannot simply use the ‘$’ handler, in Amazon WebStore you need to use "jQuery" reference instead. Alternatively, if you want to leave the "$" handler, you need to use the jQuery.noConflict.

    the jQuery documentation can be found here:
    http://api.jquery.com/jQuery.noConflict/

    The URL: url(/media/Site Files/Theme Files/Active Theme/Images/icons/facebook.png); is not correct, I believe you should have used the full http://... address instead for this.

    Also, I believe that uploading your files into the merchandising files is a safer way to do it as you will loose all 'active theme' files and associations when changing theme to a different one.

    Hope this helps,

    Please let me know if you need any further info on this?

    Regards
    Andrew
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited sad, anxious, confused, frustrated indifferent, undecided, unconcerned kidding, amused, unsure, silly