Geek Answers Handbook

JQuery.css Background no-repeat

I am trying to set the background of an element to no-repeat - I tried the following path, but it seems to do nothing, am I mistaken somewhere? It displays the image on link a , which is fine. I hide text links using text-indent to remove it from the page (hiding it), but hiding it also hides the background image. Is there a way to hide the link and just display the bg image? I still do it below - I just need a guide to solve 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 look at it in firebug, the td a element is what comes from jQuery css. Even setting the background to no-repeat does not work from here, and in the main css file I tried to add height and width - it doesn't seem to work. Vaguely.

 <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; } = "javascript: __ doPostBack ( 'ctl00 $ ctl07 $ HealthAndSafetyRadarForm_Wizard $ SideBarContainer $ SideBarList $ ctl05 $ SideBarButton', '')" style = "background: url (" / assets / img / radarstep6dark.png <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; }
+7
source share
4 answers
 .css({'background-image' : 'url(/assets/img/radarstep' + (index + 1) + 'dark.png)', 'background-repeat': 'no-repeat'});
+19
source

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

+2
source

Try the following:

 .css({ 'background-image': 'url(/assets/img/radarstep' + (index + 1) + 'dark.png)', 'background-repeat' : 'no-repeat' });
0
source 
  input[type="submit"] {background:url(mybutton.png);background-repeat:no-repeat;height: 29px;width: 44px; }

Try it, it works for me

0
source

More articles:


All Articles