10

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; }
Improve this question

4 Answers 4

Reset to default
25 
.css({'background-image' : 'url(/assets/img/radarstep' + (index + 1) + 'dark.png)', 'background-repeat': 'no-repeat'});
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

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' });'
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 } ); ?

Improve this answer

2 Comments

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.
un-commenting the 'display:block' worked now as it displays the correct height + width =)
1

Try this:

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

3 Comments

when adding the line it comes back with Expected: ':'
oh silly me, instead of adding the , i should be adding : (sometimes i feel like slapping the eyes out of my head)
Where you've written 'background-repeat:', it should be 'background-repeat', without the : at the end of the property name.
0 
 input[type="submit"] {background:url(mybutton.png);background-repeat:no-repeat;height: 29px;width: 44px; }

Try this it works for me

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.