What if I already have a background image set up like this?
#header
{
width: 100%;
background: url(/Content/images/header.jpg) -0 0 no-repeat;
}
And now, after the page has been loaded, I want to change it. Wouldn't this code do the trick?
$("#header").css('background-image', '/Content/images/aff/header_<%=affiliateID%>.jpg')
EDIT: This code needs to run after the page loads... and here's where it gets a bit tricky. It's an MVC app...the code is in the masterpage but nested within a 'RenderPartial' control: [on my.Master]
<% Html.RenderPartial("showLoginStatus"); %>
Inside the 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 alert doesn't appear. Something with how that control is rendered seems to be causing issues. Maybe the new background is being overridden by the stylesheet? (should I remove it from there?) [off to test this]