How to set a background image only for the homepage

Larry_Ellis

I would like to find out to set a background image that only shows up on the home page, and any other page that displays request offerings. I want the background on all other pages to remain the same as is.

Konstantin_Slavin-Bo

You could do something like this:

$(document).ready(function ()
    var homepageURL = "View/94ecd540-714b-49dc-82d1-0b34bf11888f"
    
    if (document.URL.indexOf("ServiceCatalog/RequestOffering") > -1 || 
        document.URL.indexOf(homepageURL) > -1) {

      $('body').css({'background-image': 'url(/CustomSpace/bg.png)', 'background-repeat': 'no-repeat', 'background-position': 'top center', 'background-color': '#fff'});
    }
});

Place this in your custom.js and replace the URL in homepageURL with the URL of the home page your are using.

Edit: The code-block is not really working, here is the code again:

$(document).ready(function (){
    var homepageURL = "View/94ecd540-714b-49dc-82d1-0b34bf11888f"
   
    if (document.URL.indexOf("ServiceCatalog/RequestOffering") > -1 ||
        document.URL.indexOf(homepageURL) > -1) {

      $('body').css({'background-image': 'url(/CustomSpace/bg.png)', 'background-repeat': 'no-repeat', 'background-position': 'top center', 'background-color': '#fff'});
    }
});

Edit2: Think I fixed the code-block no I didn't , but I'm gonna leave the above anyways.

Marek_Lefek

Konstantin_Slavin-Bo. It works. Could you help also to add transparent backround color to div on dedicated site. I try to use code below for class .panel-heading but it won't work.

$('body').css({'background-image': 'url(/CustomSpace/bg.png)', 'background-repeat': 'no-repeat', 'background-position': 'top center', 'background-color': '#fff'});

$(.panel-heading).css({'background-color': 'rgba(0, 0, 0, 0.0)' });

Konstantin_Slavin-Bo

@Marek_Lefek
First of all, you need quotes around .panel-heading, so the line should be:

$('.panel-heading').css({'background-color': 'rgba(0, 0, 0, 0.0)' });

But even then, I don't think you would get the desired result, as this wouldn't show the body background, but just the parent div elements, of which the '.panel' class is white.

Marek_Lefek

Missing qoutes was writing mistake. I agree that parent div elements has set background but it don't work also for for parent divs. I can do it in css file but it works for all pages.

Konstantin_Slavin-Bo

The element you would need to do it on is .panel, which would remove all the white background on pretty much the whole form (excluding the fields ofc):

$('.panel').css('background-color','transparent');