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]

Answer 1

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

Answer 2

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