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 to fix the my Anchor link issue [duplicate]

    How to print barcodes from a website based on a template? [duplicate]

    how to simplify font import in css

    Google Chrome unresponsive on simple CSS page - how to fix?

    Why won't my SVG's show?

    How to center Nav Bar CSS

    How to start ordered list from 2 not 1 with w3c validity and IE 6 compatibility?

    Remove oval border-radius when 2 digit numbers show up

    CSS: How do I get my “send” button to line up (move up) and size up (scale) properly?

    How to center a div in html & css, always keep the aspect ratio, and fill max screen width/height?

    How to style first paragraph

    of the content differently without using css class , ID or javascript, with IE6 compatibility?

    How to keep footer at the bottom even with dynamic height website

    How to make div box actually touching the side of the browser as mine has a gap?

    How to float text on image in css3

    How to make arc shapes with CSS3?

    how to make the text in a div to not overflow its width

    How to apply focus css for all drop downs?

    bootstrap dropdown on mouse over the menu item should show edit/delete icon on right side

    How do I resize an image size automatically loaded in different browsers and screen size?

    Rails 4: How to style navigation for current page using jQuery

    With Watin, how do I wait until an element gets a certain CSS class?

    How to play CSS3 transitions in a loop?

    How to add border for html tr

    How to remove dash inside text with CSS?

    how to change browsers default scrollbar using css or jquery

    Using Javascript or JQuery to show/hide on click, and change image as well

    How to center field_with_errors class

    CSS: How to set position absolute of a span inside a relative-position-div which contains [closed]

    How to center an image between two columns in CSS?

    How to get Style From jQuery in angular2