Change background image of a div

Question

I have 4 pages. for example: here.com/, here.com/page1/, here.com/page2/, here.com/page3/

all 4 pages is using the same template (i didn't write the template), and it has a top box with a background image. something like this:

<div id="topbox">some text here</div>

the css:

#topbox {background:url('path/to/image/here.jpg') no-repeat};

Problem is all 4 pages is using the same image since it has the same id #topbox, and I'm not able to go in and change the structure of the pages. Is there a way that I can use js to detect the url path, say if it's at root then background will be defaultpic.jpg, if /page1/ will use picture1.jpg, /page2/ will use picture2, /page3/ will use picture3.jpg

Answer 1

From the information you've given, I'd suggest:

var pagePicture = {
    'page1' : 'picture1',
    'page2' : 'picture2',
    'page3' : 'picture3'
}

var page = window.location.pathname.replace(/^\//,'').split('/').shift();

document.getElementById('topbar').style.backgroundImage = (pagePicture[page] || 'default') + '.jpg';

References:

• Array.prototype.shift() .
• HTMLElement.style .
• Location API .
• String.replace() .
• String.prototype.split .
• Window.location .

Answer 2

follow the below steps. hope it will help you as a guidance.

1. get the page URL using:

 var currentPage = document.URL; 

2. use the above url string to identify your particular page (you may need to use substring() to extract it.)
3. use switch/case or conditional block to assign the correct image to correct page.

shouldn't be that complex.

Answer 3

Used js detection isn't a good choise apart if you can't modify your div (unique include).

In case when you can add class in your div:

  <div id="topbox" class="page1">    

And in your CSS:

#topbox.page1 {background:url('path/to/image/picture1.jpg') no-repeat};    

Repeat this procedure for all your pages.

JS detection case :

<script type="text/javascript">
 window.onload = function() {  
  var path= window.location.pathname.split( '/' );
  var page = path[path.length - 1];
  var matchPageNumb = page.match(/([0-9]+)/g);
  if( matchPageNumb.length ) {
    var node = document.getElementById('topbox');
    if( node !== null ) {
      var bgURL = "url('path/to/image/picture" + matchPageNumb[matchPageNumb.length-1] +".jpg') no-repeat";
      node.style.background = bgURL;
    }
  }
 }
</script>

Answer 4

Below code should do what you want:

function getPictureForPage() {
    var url = document.URL; // for example: http://www.here.com/page2/mypage.html
    var page = url.substring(20).split('/')[0]; // Stripping 'http://www.here.com/' from the url, then splitting on '/' to split the remaining url, and get the first element ('page2')

    switch (page) {
        case 'page1': 
            return 'picture1.jpg';
        case 'page2': 
            return 'picture2.jpg';
        case 'page3': 
            return 'picture3.jpg';
    }
    return 'defaultpic.jpg';
}    

document.getElementById('topbox').style.background = "url('" + getPictureForPage() + "')";

Answer 5

I was able to get it to work, by inserting another css file after the existing one - to only the page i want to change the bg, and it overwrite the existing 'topbox' class. #topbox {backgroundurl('path/to/image/file.jpg') !important; running out of time, but this work. not sure if this's the right way to do it, but it works ... for now. i'll visit back and use the codes was provided here and apply to the page. thanks for all your help,

Answer 6

As you are unable to go to the html, you can get this solved by 2 ways.

1. Add class to div with id topbox dynamically from js file depending on the url and applying background css to respective class.

jQuery Code

var url = window.location.pathname;
var divCls = '';
switch(url) {
    case 'here.com/page1/': divCls = 'page1';
             break;

    case 'here.com/page2/': divCls ='page2';
             break;

    case 'here.com/page3/': divCls ='page3';
             break;

    case 'here.com/page4/': divCls ='page4';
             break;

    default: divCls ='page';
             break;
}

$("#topbox").addClass(divCls);

CSS

#topbox.page1 { background-image: url(../page1.jpeg); }
#topbox.page2 { background-image: url(../page2.jpeg); }
#topbox.page3 { background-image: url(../page3.jpeg); }
#topbox.page4 { background-image: url(../page4.jpeg); }

2. Directly applying the background image from javascript

jQuery Code

var weburl = window.location.pathname;
var chksplit = weburl.split('/');
switch(chksplit[0]) {
    case 'page1': $("#topbox").css("background-image": "url(../page1.jpeg)");
             break;

    case 'page2': $("#topbox").css("background-image": "url(../page2.jpeg)");
             break;

    case 'page3': $("#topbox").css("background-image": "url(../page3.jpeg)");
             break;

    case 'page4': $("#topbox").css("background-image": "url(../page4.jpeg)");
             break;
}