Search code examples
herokubackground-image

My background image is not showing in Heroku (I am NOT using Ruby or Rails)

I have a project deployed on heroku that is not displaying the background image. The image is displaying on localhost. I've tried searching for solutions to this issue, but most of the articles I have found concerns Ruby or Rails, neither of which I am using or are even familiar with. My app is an express app and I'm using node-sass to compile my scss.

This is the pug file:

extends layout

block custom-styles
    link(rel='stylesheet', href='/css/blocks/gallery.css')
    link(rel="stylesheet", href="/css/blocks/hero.css")
    link(rel="stylesheet", href="/css/blocks/contact.css")
    link(rel="stylesheet", href="/css/font-awesome.min.css")

block nav
    include partials/nav-home

block content
    .hero-background
        include blocks/hero
        include blocks/skills
        include blocks/gallery2
        include blocks/contact

This is the hero css:

/*---hero (block)---*/
#hero-jumbotron {
  height: 100vh;
  width: 100vw;
  background-color: transparent;
  color: white;
  margin: 0;
}

.hero-background {
  overflow: hidden;
  position: relative;
  background: transparent;
  width: 100%;
  /*the psuedo-elemet will-change property added for smooth-scrolling*/ }
  .hero-background::before {
    content: ' ';
    position: fixed;
    background-image: url("/images/female-developer.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: 75%;
    background-attachment: fixed;
    z-index: -1;
    will-change: transform;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0; }

.herotext {
  background-color: rgba(5, 5, 5, 0.4); }

Below is a screenshot of the chrome dev tools style for that element - the original css is crossed out and replaced with the style above it - apparently heroku does that in the background, the original css is in tact on local host. If you go to the url listed (https://blooming-badlands-17631.herokuapp.com/images/female-developer.jpg), the image does get served without any issues.

portfolio screenshot

One answer on stack overflow suggested replacing url with image-url, but I guess that's a ruby/rails thing as that broke the project for me on local host. Another article said to make sure capitalization in the url is correct because it's fine on a Windows platform, but when it get's ported to a linux platform like Heroku, it breaks if it capitalization is not correct, so I verified that as well.

Here is an image of what it's supposed to look like

portfolio on localhost

Solution

  • The problem was the .hero-background:before pseudoelement had a z-index of -1 but the body wasn't transparent. On localhost, I guess that didn't matter, but on heroku it did.