Add var into css in js file

[multichild]

Hi,

Below is breaking, as I basically need that variable to appear as the second position value

if ($('body').is('#Home')) {
   var navBarWrapperHeight = $('.navbarWrapper').height();
   $('body#Home').css('background', 'url(/Images/Shared/Home_Page_Background.png) no-repeat 0 '+ navBarWrapperHeight +' fixed');
}

Tried without the plusses too

[James_Hibbard]

What does:

if ($('body').is('#Home')) {
  const navBarWrapperHeight = $('.navbarWrapper').height();

  const property = 'url(/Images/Shared/Home_Page_Background.png) no-repeat 0 ' +
                   navBarWrapperHeight +
                   ' fixed';

  console.log(property);
}

log to the console?

[multichild]

@James_Hibbard

if ($(‘body’).is(‘#Home’)) { const navBarWrapperHeight = $(‘.navbarWrapper’).height(); const property = ‘url(/Images/Shared/Home_Page_Background.png) no-repeat 0 ’ + navBarWrapperHeight + ’ fixed’; console.log(property); }

Hi James,

url(/Images/Shared/Home_Page_Background.png) no-repeat 0 114.6 fixed

which is correct

This however is not right it seems

const navBarWrapperHeight = $('.navbarWrapper').height();

        const property = 'url(/Images/Shared/Home_Page_Background.png) no-repeat 0 ' +
            navBarWrapperHeight +
            ' fixed';

        $('body#Home').css('background', property);

        //console.log(property);

[James_Hibbard]

You forgot the unit. It should be (notice the px):

url(/Images/Shared/Home_Page_Background.png) no-repeat 0 114.6px fixed

You can do that like this:

if (document.body.id === 'Home') {
  const navBarWrapperHeight = $('.navbarWrapper').height();
  const property = `url(/Images/Shared/Home_Page_Background.png) no-repeat 0 ${navBarWrapperHeight}px fixed`;
  $('body').css('background', property);
}

Pls note, I’m using modern JS syntax here, which won’t work in IE.

[multichild]

Fantastic thank you, can I ask you one more question please, both these below do not work…

$('body').css('background': property, '-webkit-background-size': imageResponisveWebKit);
$('body').css('background', property, '-webkit-background-size', imageResponisveWebKit);

To be included as below:

    if (document.body.id === 'Home') {
        const navBarWrapperHeight = $('.navbarWrapper').height();
        const property = `url(/Images/Shared/Home_Page_Background.png) no-repeat 0 ${navBarWrapperHeight}px fixed`;
        const imageResponisveWebKit = `cover`;
        const imageResponisveMoz = `cover`;
        const imageResponisveO = `cover`;
        const backgroundSize = `cover`;
        //-moz-background-size: cover;
        //-o-background-size: cover;
        //background-size: cover;
        $('body').css('background', property, '-webkit-background-size', imageResponisveWebKit);
    }

[m_hutley]

JQuery’s .css() invocation takes one of three parameter patterns:
.css(string,string|number)
.css(string,function)
.css(object)

so your function call will have to invoke the last one.
$('body').css({'background': property, '-webkit-background-size': imageResponisveWebKit});
(or else call it twice, each time passing a single property to change.)

[PaulOB]

@multichild

-webkit-background-size

OFF Topic:

Why are you using a prefix for background-size. ? You’d have to go back over 10 years to find a browser that doesn’t support the current version Indeed I think the prefixed webkit version differed in some ways but I may be mis-remembering.

On another matter is it a good idea to find the height of your navbar with JS? Won’t that change if the user resizes text or resizes the layout? Sounds like this should be a job for CSS?

Also be aware that IOS does not behave well with background-attachment fixed and cover (or even just attachment-fixed). It spreads the image over the whole document and not the viewport.

Just tell me to mind my own business