I included css file in jade template file designed for node.js server as below:
title Home page
style
include homepage.css
The images included in the css file are not dislayed when I render the jade file using node.js server as below:
var express=require('express');
var app=express();
app.set('view engine','jade');
app.get('/',function (req,res) {
res.render('homepage1.jade');
});
app.listen(3000);
The css file is:
html, body, h1, h2, h3, h4, h5, p, ol, ul, li {
}
body {font-size: 100%; font-weight: normal; width:1365px; margin:auto;
}
#container { background-image: url("/views/technowiz_resized.jpg"); background-attachment:fixed;
}
header { width:1305px; height:100px; background-color:red; background-image:url(/views/ban_resized.png) ; text-align:center; border:10px solid black ; margin:auto;
}
#rosette { position:relative; right:550px; top:-80px;
}
footer
{
background-color:black;
border:3px solid white;
}
#sidebar
{
float: right;
width: 400px;
}
#sidebar ulsb
{
margin: 0;
padding: 0;
list-style: none;
}
#sidebar lisb ulsb
{
padding: 20px;
}
#sidebar lisb lisb
{
padding: 2px 0;
border-bottom: 1px dotted #333;
}
#sidebar h2sb
{
height: 35px;
margin: 0;
padding: 6px 0 0 20px;
background: url(/views/post_title_bg.png) repeat-x;
font-size: 153.9%;
font-weight: normal;
color: black;
}
#sidebar h5
{
height: 25px;
margin: 0;
padding: 5px 0 0 5px;
background: url(/views/post_title_bg.png) repeat-x;
font-size: 110.9%;
font-weight: normal;
color: black;
}
#sidebar .pad
{
padding: 20px;
}
The background colour is loaded but not the images.
The views direcctory contains the jade css files and all the images and te project folder contains the home.js file and the views folder.
The images donot load even when /views is not specified i.e. even if only directly post_title_bg.png is written in url.
Any help would be great.Thanks.
You are currently only serving request to '/' with your app which you respond to by sending a rendered page. So your app is never trying to serve a file from the file system, which would need some kind of static file serving like
app.use('/static', express.static('/public'));
from the Express API.
You would then have to put your images to '/public/image.jpg' and change the URL in the CSS to '/static/image.jpg'.
So why is the style sheet working then? The style include directive copies the content of the style sheet into the header of the generated HTML instead of creating a relative style link - therefore your browser never has to ask for the style sheet file (a relative style link could be the better choice, though).
Also, your header-image url lacks quotes.