Home/ Questions/Q 7997337
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T14:56:48+00:00

I’m a bit stuck right now, I basically have my header element in the

  • 0

I’m a bit stuck right now, I basically have my header element in the DOM and I have a background image hard coded in the CSS for the index page.

What I was looking to do was for this image to change on different pages. I thought this was going to be a pretty simple thing to do.

$('header').css("background-image","url(assets/img/consulting.png)")

I realise there is no event trigger, but I was under the impression that I wouldn’t need to actually do that.

Also my CSS file and file for the page I’m adding the jQuery to are in different folders as is the img folder… I’m unsure where how I should be calling the url in the jQuery code. Should it be as though navigating from the CSS file or the HTML file?

Thanks guys, sorry if I missed something really obvious here.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is the approach I would take, simply to remove the majority of the css from jQuery although you may simple want a click event.

    I would do this for each page. 

    <body class="home">
<body class="about">
<body class="contact">

    Then in your CSS do

    .home header { background-image: url(../assets/img/consulting.png"; }
.about header { background-image: url(../assets/img/consulting2.png"; }
.contact header { background-image: url(../assets/img/consulting3.png"; }

    If your site is a single index that loads content of the other pages without refreshing them you can do.

    $(function(){
    $('#aboutlink').click(function(e){
        $('body').removeClass().addClass('about');

        //your other snippets here

        e.preventDefault();
    });
});
    • 0