I have been experimenting with creating a database using only JSON and surprisingly, it worked once I added a "js/" in the URL. However, my current issue lies with CSS. Let me elaborate.
Here is the JSON data:
[
{
"title":"Facebook",
"url":"http://www.facebook.com",
"bg":"../img/facebook.png"
},
{
"title":"Twitter",
"url":"http://twitter.com",
"bg":"../img/twitter.png"
}
]
This is the HTML markup:
<section id="links">
<!-- anchor tags should go here -->
</section>
And this jQuery code snippet:
$(function(){
$.getJSON('js/links.json', function(data){
$.each(data, function(index){
$("#links").append('<a href="'+data[index].url+'" style="background-image:url("'+data[index].bg+'");"><span>'+data[index].title+'</span></a>');
});
});
});
You would expect it to work perfectly fine. It does display the content, but for some reason, the background image is not showing up. The HTML seems to be behaving strangely as shown in the inspector.
So, what could be causing this issue and how can I rectify it?