Home Self-Service Portal - Community
Options

How to set a background image only for the homepage

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.

Answers

  • Options
    Konstantin_Slavin-BoKonstantin_Slavin-Bo Customer Ninja IT Monkey ✭✭✭✭
    edited May 2017
    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.


  • Options
    Marek_LefekMarek_Lefek Customer Advanced IT Monkey ✭✭✭

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

  • Options
    Konstantin_Slavin-BoKonstantin_Slavin-Bo Customer Ninja IT Monkey ✭✭✭✭
    @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.

  • Options
    Marek_LefekMarek_Lefek Customer Advanced IT Monkey ✭✭✭
    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.
  • Options
    Konstantin_Slavin-BoKonstantin_Slavin-Bo Customer Ninja IT Monkey ✭✭✭✭
    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');
Sign In or Register to comment.