Connect the CSS file with the EJS file

Can someone help me with linking a CSS file to an ejs file? I've tried the solution below but it's not working as expected

.css code:

    body {
      background:url('img.jpg') no-repeat center center/cover;
    }

.ejs code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="/CSS/stylesheet.css" type="text/css">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Feddback Form</title>
  </head>
  <body>
    
    <form action="" method="POST" class="form">
      <h1>Store Ownership Feedback</h1>
      <div>
        <label" for="name">Problem</label>
        <input type="text" id="name" name="name" class="box"/>
      </div>
      <div>
        <label for="request">Feedback</label>
        <textarea name="request" id="request" cols="30" rows="10" class="box"></textarea>
      </div>
      
      <button type="submit">Submit</button>
    </form>
      </div>
    
  </body>
</html>

.js code:

const express = require("express");
const { google } = require("googleapis");

const app = express();
app.set("view engine", "ejs");
app.use(express.urlencoded({ extended: true }));
app.use(express.static(__dirname+'/views'));
app.get("/", (req, res) => {
  res.render("index");
});

Project Structure: .js:/public .ejs:/public/views .css:/publice/views/CSS

Answer №1

A common recommendation is to have the main .js file located in the root section, while the css files should be placed in the public section. Below, I have provided an example structure that may serve as a guide.

Folder Arrangement: Folder Structure

Serving Static Files: public static

Including css on header.ejs: Include css file

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to resize an element such as an image?

When an image is resized using a percentage, it preserves its aspect ratio properly. I am looking for a way to replicate this behavior with a div. My current challenge involves precisely positioning an element relative to an image. The image fills 100% of ...

Are you ready to create a Modal Factory?

For a while now, I have been utilizing modals in various front-end frameworks to communicate with users in my applications. Typically, the process involves defining the modal's html and then rendering it through a click event. As my apps continue to ...

Issue with Jquery not updating the background-size attribute

Having just started out, I'm having trouble understanding why my code won't properly execute the following: var h = $( window ).height(); $('.bg').css({ 'height' : h, 'background-size' : "auto" + h }) Sp ...

Overflow Issue in Horizontal Navigation Bar of Bootstrap 4

Can someone help me set up a horizontal navbar that scrolls inside the page similar to Uber Eats? I've created the navbar and set the spyscroll, but I'm struggling with making it responsive. How can I hide categories from the navbar when there&ap ...

"Utilize Python's Selenium library to automate clicking the 'Get Data

Having trouble with clicking the GetData button to retrieve the output. Looking for assistance on how to achieve this. Update your code below:- from selenium import webdriver from selenium.webdriver.common.keys import Keys from selenium.webdriver.chrome.o ...

Creating a dynamic sidebar menu with clickable submenus through jQuery and CSS for a user-friendly experience

<div id="sidebar" class="sidebar"> <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 100%;"> <div data-scrollbar="true" data-height="100%" data-init="true" style="overflow: hidden; width: a ...

Issues with HTML structure across various devices

Being a novice in web development, I've been experimenting with creating a modal body. https://i.sstatic.net/Qk5BR.png The code snippet below represents my attempt at structuring the modal body: <div className="row modalRowMargin textStyle" > ...

Moving divs to a separate line in mobile display

I currently have a basic image-thumbnails landing page set up like this: <div style="display: inline-block;"><img style="margin: 3px 3px;" src="..." alt="" width="200" height="200" /></div> <div style="display: inline-block;"><i ...

What is the best way to create a sticky menu bar?

I have this code snippet at the beginning of my website: <body> <div class="agile-main"> <div class="menu-wrap" id="style-1"> <nav class="top-nav"> <ul class="icon-list"> ...

What is the best way to set the width of a nextjs Image using CSS styles

Do you think it's more beneficial to use 'next/image' rather than the traditional img tag? If so, why? I am trying to display an image by specifying width and height in styles using a class called 'img', like this... <img class ...

Ways to manipulate external CSS classes with styled components without direct access

Currently, I am utilizing react-table and wanting to implement CSS rules for the class rt-td, which is not accessible or adjustable through their API functionalities. In traditional CSS practice, I could easily override the CSS class within my stylesheet. ...

Is there a left and right margin when incorporating Bootstrap grid?

Currently, I am working on developing an Angular application and utilizing Bootstrap columns to easily format and space my page. However, I am facing an issue where there seems to be some unwanted margin around the element even though I have applied col-lg ...

Is there a way to deactivate a JavaScript function on a specific webpage using CSS?

I've implemented a JavaScript function that triggers a pop-up alert whenever a user attempts to navigate away from the site by clicking on an external link: $("a[target='_blank']").click( function() { return confirm('Please don&apo ...

"Finding the Perfect Alignment: How to Center Legends in Firefox

The issue at hand An issue has been identified where the code functions as intended in Chrome, Opera, and IE but fails to work in Firefox: fieldset>legend { display: table; float: none; margin: 0 auto; } <fieldset> <legend>Legend ...

Obtain the height of the div element class

Is it possible to retrieve the height of a class in C#? I am currently utilizing HTMLAgilityPack to access the nodes. Here is my current code. private async void GetCldInfos() { string sURL = @"https://m.investing.com/economic-calendar/"; ...

Utilizing the React.js Bootstrap grid system

I've been diving into React, but I'm facing an issue with the bootstrap grid/reactstrap. Instead of getting horizontal columns as expected when using the grid system, I seem to be stuck with a vertical layout. Film.js import React from "react"; ...

Automatically set the margin for the initial element with flex-grow

In the scenario presented, there is a navigation structure utilizing two flexbox containers. The flex-grow property allows the navigation to stretch and fit the main wrapper, which in this case has a width of 100%. Here is the HTML code: <!DOCTYPE htm ...

table that can be scrolled horizontally

I am facing an issue similar to the one discussed in this thread about responsive design for html wide table. In essence, my problem involves a table that is wider than the container div, which has ten columns in width (using bootstrap). The challenge aris ...

Clicking on the background does not alter the onclick function

Can anyone help me troubleshoot my code? My function load() isn't changing the background of .firstDiv for some reason. I've checked multiple times but I can't seem to spot any errors. function load() { document.getElementsBy ...

Assessing the value of a variable or expression embedded within a string in Sass

Creating a mixin to set a div to transparent requires special attention to evaluate a variable in a string. The -ms-filter line must be quoted and should include the result of a calculation ($amount * 100). How can I successfully incorporate this into my ...