Set Background Image With Ejs Template

Working on a blog site, Here's the effect I want : I use a forEach to loop through every post and create the same style for each post. This is my code : <% blog.forEach(funct

Solution 1:

This should get you started:

.wrapper {
  position: relative;
}
.overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: rgba(50, 50, 50, 0.5);
}

<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet" /><divclass="col-md-6 col-sm-6"><ahref="/blog/<%= blog._id %>"><divclass="wrapper"><imgclass="img-responsive"src="http://pipsum.com/800x300.jpg"><divclass="overlay"><ahref="/blog/<%= blog._id %>"><h2> blog.title </h2></a><span>blog.created.toDateString();</span></div></div></a><p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque molestie commodo quam, in dapibus odio laoreet sed. Duis id mauris in ligula lacinia bibendum non nec urna. Praesent at est varius, rutrum massa sed, elementum velit.
  </p></div>

I stripped out the EJS to focus on the HTML markup and CSS.

---

A brief overview of how this works:

• The image and overlay is wrapped in .wrapper, which is set to position: relative;.
• The .overlay is set to position: absolute; which takes the div out of normal content flow and absolutely positions it inside .wrapper.
• bottom: 0; ensures it is at the bottom, and width: 100% expands it to fill .wrapper.
• I added background: rgba(50, 50, 50, 0.5); to make the text a bit more readable (values need tweaked). rgba stands for Red, Green, Blue, Alpha. The Alpha digit allows you to adjust transparency. 1 is fully opaque, 0 is fully transparent.