jQuery .css Background no-repeat

Question

I'm trying to set the background of an element to no-repeat - I've tried the following way but it seems to do nothing, am I going wrong somewhere? It brings out the image on the a link which is fine. I'm hiding the text links using text-indent to get it off the page (hiding it) but hiding this also hides the background image. Is there a way of trying to hide the link and just display the bg image? Below is what i have done so far - I just need some guidance to overcome this problem - relatively new to jQuery.

<script type="text/javascript"> //Looking for every td a element and alerting it out on page (popup)
$('.AspNet-DataList td a').each(function (index) {
    //alert(index + ': ' + $(this).text());
    var submitEl = $(".AspNet-DataList td a")
    //.parent('.AspNet-DataList td a')
    .css('background', 'url(/assets/img/radarstep' + (index + 1) + 'dark.png)', 'backgroundRepeat:', 'no-repeat');
});

When I view it in firebug the td a element this is what is coming from the jQuery css. Even setting the background to no-repeat from here doesnt work and in the main css file I have tried adding a height and width - doesn't seem to work. Confused now.

<a id="ctl07_HealthAndSafetyRadarForm_Wizard_SideBarContainer_SideBarList_SideBarButton_5" href="javascript:__doPostBack('ctl00$ctl07$HealthAndSafetyRadarForm_Wizard$SideBarContainer$SideBarList$ctl05$SideBarButton','')" style="background: url("/assets/img/radarstep6dark.png") no-repeat scroll 0 0 transparent;">Review</a>
//main.css
.AspNet-DataList td a {
    /*text-indent: -9999em;*/
    /*display:block;  */
    background-repeat: no-repeat;
    height: 25px;
    width: 25px; 
}

Solution 1

.css({'background-image' : 'url(/assets/img/radarstep' + (index + 1) + 'dark.png)',
      'background-repeat': 'no-repeat'});

Solution 2

Why did you comment the display: block; css ? You need that to tell the browser your link has to be displayed as a block. Also I'm not sure you can use jQuery css properties like you do ; did you try the syntax div.css( { propertie: value, propertie: value } ); ?

Solution 3

Try this:

.css({
    'background-image': 'url(/assets/img/radarstep' + (index + 1) + 'dark.png)',
    'background-repeat' : 'no-repeat'
});

Comments

[mjcoder]

i initially put a block to hide the text off page for testing purposes. I will try your solution Jeremy. Thanks for taking the time in helping me.

[mjcoder]

when adding the line it comes back with Expected: ':'

[mjcoder]

oh silly me, instead of adding the , i should be adding : (sometimes i feel like slapping the eyes out of my head)

[mjcoder]

Houdmont that worked perfectly - is there documentation on the different properties i can add for the background like height, width, opacity levels? - '.css({ 'background-image': 'url(/assets/img/radarstep' + (index + 1) + 'dark.png)', 'background-repeat': 'no-repeat', 'height': '25px', 'width': '25px' });'

[mjcoder]

un-commenting the 'display:block' worked now as it displays the correct height + width =)

[Houdmont]

Where you've written 'background-repeat:', it should be 'background-repeat', without the : at the end of the property name.