Image not loading in SharePoint 2013

Question

We are in process of upgrading SP2010 project to SP2013. There is an issue loading an image in a webpart.

In the SP2013 master page we have added before head tag:-

<link rel="stylesheet" type="text/css" href="../../Style Library/CustomBranding/Custom.css" />

The above CSS file is present under Style Library/CustomBranding. For testing I added body{border:5px solid black;}. It worked.. So CSS is picked correctly...

Foll is CSS code in the CSS file:-

.imgGoal
{
    height:20px;
    FONT-SIZE: 14px; 
    FONT-FAMILY: Calibri; 
    TEXT-ALIGN: center;

    color:#ffffff;

    TEXT-ALIGN: center;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#04a2a4", endColorstr="#cdfefe",GradientType=0 ), progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/Style Library/Images/goal.png"); 
}

The goal.png is present under Style Library/Images.

On webpart we have jquery code:-

   $("div[IsLinked='False'][Recurrence='True']").each(function () {
                var $this = $(this).parents("td:first");
                $this.data('class', $this.attr('class')).removeClass("normal").removeClass("normal2").addClass("imgGoal");
            });

Basically we are adding a class (.imgGoal) to an td tag if the div tag has [IsLinked='False'] and [Recurrence='True']. I used F12 in IE and the debugger is going through this line on page refresh/load.

The same thing is working in SP2010.

Any idea what is causing issue in SP2013?

Answer 1

The method which you are using is deprecated use the following code

.yourcssclass{

background: url(fundraiser.jpg) no-repeat, -moz-linear-gradient(top, #ff3b68 0%, #0029d3 100%); /* FF3.6+ */
background: url(fundraiser.jpg) no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3b68), color-stop(100%,#0029d3)); /* Chrome,Safari4+ */
background: url(fundraiser.jpg)no-repeat, -webkit-linear-gradient(top, #ff3b68 0%,#0029d3 100%); /* Chrome10+,Safari5.1+ */
background: url(fundraiser.jpg) no-repeat, -o-linear-gradient(top, #ff3b68 0%,#0029d3 100%); /* Opera11.10+ */
background: url(fundraiser.jpg) no-repeat, -ms-linear-gradient(top, #ff3b68 0%,#0029d3 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3b68', endColorstr='#0029d3',GradientType=0 ); /* IE6-9 */
background: url(fundraiser.jpg) no-repeat, linear-gradient(top, #ff3b68 0%,#0029d3 100%); /* W3C */
 } 

here fundraiser.jpg is background image

Answer 2

Try Registering CSS using following

<SharePoint:CSSRegistration name="/Style Library/CustomBranding/Custom.css" After="corev4.css" runat="server"/>