Hi there, I have a quick and simple question. I am attempting to include a div with a background-image in my *.ejs page file.
<style>
.signPage{
background-image: url("//back.jpg");
width: 98%;
height: 98vh;
top: 1%;
right: 1%;
position: fixed;
border-radius: 20px;
}
The image and the ejs file are located in the same directory. Thank you!
In order to utilize a background image in your project, ensure that you set up a static path in your app.js file and place the desired image in the public/images directory.
background-image: url("images/back.jpg");
app.use(express.static(__dirname+'/public'));When referencing an image in your CSS file, remember to provide the correct path starting from where the CSS file is located.
For example, if your image is stored in a folder called "images" within a folder named "public" and your CSS file is in the "css" folder within "public",
then you should specify the path like this:
-- ../images/image-name.image-extension
To put it simply - Make sure to provide a relative path from CSS to the image.
I've set up a project using express-generator and have been editing various files - from app.js to the routes, but nodemon is not updating. The project is running in a docker container which is detecting file changes (I've checked in the docker s ...
There are two divs with a button positioned above them. Initially, only one div, the catalogusOrderBox, is visible. When the button named manualButton is clicked, it should display the manualOrderBox div while hiding the catalogusOrderBox div. The text on ...
Currently, I am following a tutorial to develop a simple TODO app using the MERN stack. The process was smooth while setting up the server with Express in the bash terminal. Here is a snippet of my server file: const express = require('express') ...
Currently, I am working on a project to gain a better understanding of API calls within Angular. While the functionality is running smoothly, my struggle lies in designing the HTML layout. To enhance the aesthetics, I have incorporated Bootstrap 5 into the ...
Struggling to solve this issue that has been lingering for a while. I'm currently working on a project where a remote JSON file is loaded into memory, parsed, and the results are displayed on the page (using pug). Everything seems to be working fine ...
I've been grappling with this problem for a while now, but I just can't seem to find the solution. That's why I'm reaching out for your expertise. Consider the example below: const async = require('async') var counter = 0 v ...
After reading several articles on missing markers, I'm still facing a unique issue that doesn't seem to have a clear solution. The problem arises when attempting to render a basic map with just one marker and a fixed location. Despite Chrome dev ...
I've been developing a responsive website and encountering an issue. In desktop view, the icon on the far right (known as "dropdown-btn") is supposed to activate a dropdown menu with contact links. However, for some unknown reason, the links are not f ...
I'm trying to add a background video that covers the entire screen but maintains a height of 400px, similar to the one shown here. Is there a way to achieve this without using JavaScript? Below is the HTML code I currently have: <div class="pr ...
In my parent container, I have set the display property to flex. Inside, there are two divs with both having flex:1 set. However, the first child div contains an image and takes up twice as much space as the second div. If the screen is 1000px in height, ...
It seems that despite following all the necessary steps in my CSS, I am facing an issue with a transition not working properly in Firefox. The bounce-in effect I have implemented is failing to function as expected in this browser, even though Firefox does ...
After recently starting to navigate Joomla, I've hit a roadblock with a seemingly simple task. I have multiple articles, each belonging to a specific category. My goal is to create a menu that displays all articles within a chosen category. When sele ...
Struggling to implement Azure Active Directory for user authentication in my node.js web application, but hitting roadblocks. Has anyone managed to make this work? The documentation is lacking clarity, with example code but no clear guidance on required p ...
There are countless websites that spark my creativity. If I am inspired by a particular design, CSS, or JavaScript on one of these sites, am I allowed to copy it to my local folder and use it? For instance, let's say I come across a website called xy ...
What are the benefits of routing requests through a service like Nginx to my Node.JS server? Is there any disadvantage in directly accessing the node server? ...
Currently, my node server is running on localhost port 5500 and react is on localhost port 3000. I am using Axios to send requests to the node backend. Interestingly, when I set axios.defaults.withCredentials = true, I encounter an error. However, if I swi ...
As I delve deeper into Node.js, I find myself really enjoying it and gravitating towards web application development. I've wrapped my head around Node.js and am currently utilizing Backbone for the front end of my projects. I'm creating applicat ...
Currently, I'm experiencing a design issue with the textarea tag in my React project. The layout looks like this: https://i.stack.imgur.com/JG1sm.png I am looking to shift the scrollbar to the right without altering the text direction (rtl). Utilizin ...
I am currently working on a project that involves saving data to a database using Mongoose. One specific field in the database is the 'thumbnail' field, which needs to be filled with a base64 converted file after the file is uploaded to the serve ...
Almost done with my website and it looks great on Firefox and IE 8, but Chrome is causing issues. Here's how it appears on FF: And here's Chrome: Notice how Chrome resizes the first image even though the code is the same as the one below? Che ...