A common issue encountered is that the style tag works within the same file, but not with the link style. To illustrate this, consider the following code snippet:
server.js
const express = require('express');
const path = require('path');
const app = express();
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, '/views'));
let image = 'https://storage.googleapis.com/gd-wagtail-prod-assets/images/evolving_google_identity_2x.max-4000x2000.jpegquality-90.jpg';
app.get('/', (req, res) => {
res.render('home', { image } );
})
app.listen(3000, () => console.log('Server is up on port 3000'));
The above code serves as a simple example of a server using Express.
home.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Using a link to an external stylesheet does not work -->
<link rel="stylesheet" href="style.css">
<!-- Only inline styles seem to be effective -->
<style>
.my-background {
width: 100%;
height: 200px;
/* This references the ejs variable 'image' */
background-image: url('<%= image %>');
background-repeat: repeat;
background-size: 100px;
background-position: left;
text-align: center;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<div class="my-background"></div>
</body>
</html>
This explanation should provide clarity on the matter.