Use jQuery to change a CSS value

Question

If i have a background image defined as:

#header
{
    width: 100%;
    background: url(/Content/images/header.jpg) -0 0 no-repeat;
}

and i want to overwrite that after the page loads. Shouldn't this code work?

$("#header").css('background-image', '/Content/images/aff/header_<%=affiliateID%>.jpg')

EDIT: As stated, the script needs to run after the page loads...and here's where things get slightly complicated. It's an MVC app...this code sits in the masterpage but is nested down inside a 'RenderPartial' control: [on my.Master]

 <% Html.RenderPartial("showLoginStatus"); %>

Then within that showLoginStatus.ascx control is:

<script type="text/javascript">
$(document).ready(function(){
    $("#header").css('background-image', '/Content/images/aff/header_<%=affiliateID%>.jpg')
    alert('this');
}
</script>

when adding the 'document.ready' wrapper, the altert never fires. So something related to when that control is rendered is mucking things up. My changed background is probably processed....it's just re-written because it exists in the stylesheet. (all i have to do is remove it from there?) [scurries off to try that]

Check this out: stackoverflow.com/questions/253689/… and jquery-howto.blogspot.com/2009/08/… — Jason Evans
– Jason Evans, Commented Jun 18, 2010 at 14:19

Marks · Accepted Answer · 2010-06-18 14:20:23Z

2

You need to do it after page load and thats made with:

$(document).ready(function(){
  $("#header").css('background-image', 'url(/Content/images/aff/header_<%=affiliateID%>.jpg)');
});

answered Jun 18, 2010 at 14:20

Marks

3,6696 gold badges33 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

justSteve Over a year ago

Ok...seems obvious and i'm betting this is where my fail traces to. However....when i place the '.ready' bit in, the alert no longer fires. So complete details in my edited question.

Marks Over a year ago

Dont know if you fixed already, but seems like you just forgot the semikolon at the end of the css() method. besides of this, it should work.

Happy · Accepted Answer · 2010-06-18 14:57:28Z

0

Use this

$(document).ready(function(){
    $("#header").css('background', 'url(/Content/images/aff/header_<%=affiliateID%>.jpg) no-repeat');
});

You also have to add "no-repeat".

It you need to use multiple styles, try this:

$(document).ready(function(){
    $("#header").css({
      'width':'50%',
     'background':'url(/Content/images/aff/header_<%=affiliateID%>.jpg) no-repeat'
  });
});

answered Jun 18, 2010 at 14:57

Happy

8917 gold badges16 silver badges32 bronze badges

Collectives™ on Stack Overflow

Use jQuery to change a CSS value

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related