Adding Background Image To Ejs File

I seem to be fine getting an image to render from my app.js file to the main ejs file, but when i change it to a background image, it does not display. Any idea whats up? my app.j

Solution 1:

I solved as this easiest solution.

ejs file

add this in your css file

body {
        width: 100%;
        align-items : center;
        height: 100%;
         

        /* Background image is centered vertically and horizontally at all times */background-position: center center;

        /* Background image doesn't tile */background-repeat: no-repeat;

        /* Background image is fixed in the viewport so that it doesn't move when 
        the content's height is greater than the image's height */background-attachment: fixed;

        /* This is what makes the background image rescale based
        on the container's size */background-size: cover;

        /* Set a background color that will be displayed
        while the background image is loading */background-color: green;
        overflow: hidden;

        /* Location of the image */background-image:url('images/introBackGround.jpg') ;
    }  

(remove all blockquotes)

router file

you must add this.

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

folder

public
 └ images
  L css 

Solution 2:

This:

app.get("/email", function(req, res){
  res.render("emailMain", {image:images});
});

should be this:

app.get("/email", function(req, res){
  res.render("emailMain", {images: images});
});

Note the extra s.

Also, you aren't using the variable i here:

<tr>
<% for(var i=0; i < images.length; i++){ %>

  <td class="vmlHero" background = "<%= images.image %>" style="background-repeat:no-repeat" bgcolor="#000000" width="100%" height="430" valign="top">

I think that should be <%= images[i].image %>, or just use a forEach instead.

It's also worth noting that the background attribute of td is deprecated, you could achieve the same effect using a background-image or background in the style.

Solution 3:

In your app.js change

res.render("emailMain", {image:images});

To:

res.render("emailMain", {images:images});

And in your .ejs file change

background="<%= images.image %>"

To:

background="<%= images[i].image %>"