OneMoreQuestion OneMoreQuestion - 3 months ago 22
CSS Question

How to add background image to only one page in Jade

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?

Answer

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).

Comments