Having trouble displaying a local image in CSS using EJS

Hey there, I'm currently working with EJS. In my CSS file, I've added a background image but it's not showing up when the page loads. Strangely, if I use a hosted image, it works perfectly.

Here is my directory structure:

https://i.sstatic.net/Y3MQA.png

style.css file:

.bgimg-1 {
    background: url('../img/cab.jpg');
    height: 100%;
}

index.html code snippet:

<head>
<link rel='stylesheet' href='../public/css/style.css' type="text/css">
</head>
<body>
<div class="bgimg-1">
    <div class="caption">
         <span class="border"><a href="/api/login">LOGIN</a></span>
    </div>
</div>
</body>

app.js setup:

app.use(express.static(path.join(__dirname + '/public')));

Answer №1

Opt for background-image over background

  .bgimg-1 {
       background-image: url('../img/cab.jpg');
        height: 100%;
      }

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

Using the "align" attribute is considered outdated and not recommended in HTML5 documents

I have encountered an error when using the align attribute. How can I fix this issue with the correct HTML5 compatible syntax? <table style="margin: 0 auto;"> <tbody> <tr> <td><input typ ...

There was an error: at.a is undefined

I am experiencing a perplexing issue with my Vue 2 web app that utilizes AWS Amplify. Strangely, a similar app I have is functioning perfectly in every respect, but this one refuses to work in production. During development on my local machine, everything ...

The script for verifying the NodeJS version is not functional in Git Bash on Windows operating system

I have been working on creating a shell script to automate the download, compilation, and building process of a program I developed. The complete script can be found on my blog. To run my program successfully, NodeJS 11 or newer is required. In order to ha ...

The static files are not loading on the Express/Nginx server

My Node.js app is having trouble loading static files in the browser, even though it works fine with curl. I am using nginx as my webserver. The application runs smoothly, but the static files are not loading. What could be the issue here? Here is a snipp ...

Organizing classes under namespaces in Node.js

Currently working on a project in node.js. I have several related classes that I want to organize in a subdirectory, with one class per file structured like this: lib/ main.js melons/ casaba.js cantaloupe.js carnegie.js I plan to us ...

Utilizing the @page CSS rule in Vue.js: A step-by-step guide

I am facing an issue with printing a specific page in landscape mode. Here is the code snippet I have been using: @page { margin: 0; size: A4 landscape; } The problem is that this style rule affects all pages in my application because all style se ...

Execute Ghost within a subfolder of my primary Node.js program

I'm attempting to set up Ghost on a subdirectory within my primary Node.js project, which is currently being hosted on azure websites. For example: Following the instructions provided here: https://github.com/TryGhost/Ghost/wiki/Using-Ghost-as-an-NPM ...

What is the best way to arrange two images next to each other using HTML and CSS in order to effectively utilize a specified width?

I am trying to display two different images side by side within a DIV element that is exactly 800px wide. The images may have varying widths and heights, with some being wider than tall and others taller than wide. I have attempted to place both images i ...

Error: The requested resource, youtube#videoListResponse, is currently unavailable

When attempting to access a YouTube playlist that includes private videos, the bot will encounter an error message. Error: unable to locate resource youtube#videoListResponse Below is the code snippet in question: if (url.match(/^https?:\/\/(w ...

What occurs when there are conflicting export names in Meteor?

After researching, I discovered that in Meteor, If your app utilizes the email package (and only if it uses the email package!) then your app can access Email and you can invoke Email.send. While most packages typically have just one export, there a ...

Convert CSV files to JSON format through file upload

Is there a way to convert a CSV file into a JSON Array object by uploading the file? I have attempted to use multer for this task. module.exports = function(express, app, upload){ var router = express.Router(); var util = require('util' ...

Senecajs responded with a result that was neither an object nor an array, displaying a Promise

Seeking guidance on incorporating promises into my Seneca modules. Firstly, there is the server.js file that exposes a route: var express = require('express'); var app = express(); var Promise = require('bluebird'); var seneca = requ ...

Looking for an efficient method to initiate vagrant configuration seamlessly with just a click?

When setting up different VirtualBoxes on Linux, I rely on using vagrant. My objective is to simplify the process for my colleagues by allowing them to visit an intranet site where they can choose which VirtualBox they would like installed on their machin ...

Is the presence of an excessive number of arguments in the object that includes functions an instance

In my program, I have implemented a feature where the user can provide an array to determine which functions are executed in a loop. However, managing the list of variables that need to be passed into each function has become challenging as the list keeps ...

Tips for directing attention to a specific row with an input field in JavaScript

I duplicated a table and added an input field for users to search or focus on a specific row. However, there are two issues: When a user enters a row number, the table displays the wrong row - for example, if the user enters 15, the table shows row number ...

How can I use the import statement to incorporate the 'posts.routes.js' file into my app using app?

Searching high and low for answers but coming up empty. When setting up an express app and including a file of routes, you typically encounter guidance on using the following statement: require('./app/routes/posts.routes.js')(app) As per nodejs. ...

Using NodeJS to assign a value to a variable

After conducting thorough research, I initially believed that using backticks would solve the issue, but unfortunately, that is not the case. I am puzzled as to why the code variable is not being passed into another variable. I have tried using backticks ...

Implementing a Custom Authentication Backend in Next.js Without next-auth: A Strategic Method

Currently, I am delving into the realm of Next.js 13 for development with little familiarity in Server-Side Rendering (SSR). The obstacle I face pertains to utilizing my own backend API built on Express.js. This backend service already supports essential ...

Need help in NestJS with returning a buffer to a streamable file? I encountered an error stating that a string is not assignable to a buffer parameter. Can anyone provide guidance on resolving this issue?

The issue description: I am having trouble returning a StreamableFile from a buffer. I have attempted to use buffer.from, but it does not seem to work, resulting in the error message below. Concern in French language: Aucune surcharge ne correspond à cet ...

The fixed-top navigation bar in Bootstrap obscures the links within the #content

As a student studying software development, I am currently working on a web development project for my class. Utilizing Bootstrap, I have implemented a navbar-fixed-top and structured the body as a table-striped table with each row containing a <a href= ...