How to add background image to only one page in Jade

Tags: html,css,pug,background-image,template-engine

Problem :

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
        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
        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?

Solution :

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

    CSS Howto..

    how do i hide anchor text without hiding the anchor

    How to use 'dynamic CSS' in Rails

    Chrome Developer Tools: How to find out what is overriding a CSS rule?

    How to create an enumerated tabular environment in HTML/CSS?

    How can I resize these divs while keeping the same layout?

    How to position element as fixed in relatively positioned container?

    How to add inset box-shadow to mapbox-div?

    How to do onclick in CSS to do transition on image?

    How to get all child elements using an xpath selector?

    how to make background full-size [closed]

    In CSS how do I affect links of only 1 class

    How to center a span in a div

    How browser auto resize website to mobile browse?

    How can I stop my submenu from disappearing while hovering between spaced submenu items?

    How to move the text a bit up and to the right?

    How to style a SVG using CSS in javaFX FXML

    How to trigger a css animated button by hovering over an image on the same page

    How to Show the Related Content in another Div when an Image Clicked

    CSS - How to have 100% height element inside of parent

    How to locate Element via CSS Selector/XPath?

    The UI Designers and Marketing people at my company don't want “awkward line breaks”. How to do with CSS or JS? [closed]

    How to reference css and script files into a node.js app?

    Css how to set 3 block block/div's in one line [closed]

    How To Left Align the Title Using CSS

    CSS: How to vertically align elements inside div with display: table-cell

    How to make a div move smoothly?

    How do I apply an outline to a custom styled HTML selection element's expansion clickable element only?

    How to style a randomly generated list of items in Javascript

    How to get a different link color on my tumblr static page then my main (front page?)

    How to make a shrink-to-fit container with max-height and scrollbars in the content area?