How to add background image to only one page in Jade

Question

I know how to do this in regular HTML, I can add a class to the body tag and modify that tag in css, but I am using Jade so I don't have a body tag to play with. My Jade file which looks like this.

index.jade (the only page that I want to have a background image in)

extends layout

block main
    .container
        h1 Hello world

I tried doing

body.index {
    background: url(images/background.jpg);
    background-size: cover;
    z-index: -1;
}

This does not work. I also tried adding a backgroundimage class to the container class and make its width and height 100% like below but it is not optimal because there is another div that comes before it in layout.jade (the file index extends) which gives an awkward spacing on this page.

extends layout

block main
    .container.backgroundimage
        h1 Hello world

I tried doing this as suggested in the comments below and set my body_class = index in index.jade. And tried to style .index in css but this is not working also.

So is there a way I can accomplish this?

http://stackoverflow.com/questions/29089925/pass-variables-to-base-layout-from-extending-jade-template has your answer. — Woodrow Barlow, Aug 26 '16 at 19:24
basically, you need to modify your layout to apply a class the the body tag if that variable is set, and then set it from within your page. — Woodrow Barlow, Aug 26 '16 at 19:26
@WoodrowBarlow I tried doing this, and made `body_class = 'index'` in index.jade, and tried to style `.index` in css, but does not work — OneMoreQuestion, Aug 26 '16 at 19:44

score 1 · Answer 1 · answered Aug 29 '16 at 02:39

1

I have accepted the above answer but I ended up just creating a separate style sheet that customized the page. Seems to be a much more simple solution.

answered Aug 29 '16 at 02:39

OneMoreQuestion

1,693
3
25
51

score 0 · Accepted Answer · answered Aug 26 '16 at 20:40

Either you need to add the index class to your document body, using something like this (or an equivalent after the page is loaded).

extends layout

block main
    - document.getElementByTagName("body").classList.add("index")
    .container.backgroundimage
        h1 Hello world

Or you could simply apply the .index class to the container element on your index page, and make sure that container spans the entire page background. (This may or may not make sense depending on the contents of your layout).

How to add background image to only one page in Jade

2 Answers2