Change background of a Div depending of HTML, without modfying CSS-CodePudding

I've got a page where a user can post a form with an uploaded image and a title.

A PHP script will generate a new page, replacing things on the sample like title with the user input.

I wanna put the uploaded image as background of my page.

I still want to use the same CSS for each page because generating a new one for each page is too heavy.

Since my HTML pages don't have a fixed name, I can't just treat the case in CSS.

I tried using some JS at the end of my html page but the image doesn't appear in this case. Seems like some properties doesn't apply to the new background but I'm not sure of this.

I also tried including a style element in the head of my HTML but same as with JS, the image doesn't appear.

My page is mostly based on this codepen : https://codepen.io/BarryKe/pen/advLWa And here is a custom codepen of exactly my situation :https://codepen.io/Cryoclass/pen/LYrzGre

Does someone see a (simple ?) solution of how to do it ? Thanks in advance !

var el = document.getElementById('chg-bg');
el.style.backgroundImage = "url(https://via.placeholder.com/800/ff0000)";

.hero-image {
  top: -20rem;
  bottom: -20rem;
  width: 100%;
  min-height: 100px;
  background-image: url(http://www.howlatthemoon.com/wp-content/uploads/2015/09/nyc-skyline.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  position: absolute;
  z-index: 1;
}

.hero h1 {
  position: relative;
  text-align: center;
  color: white;
  padding-top: 20rem;
  z-index: 2;
}


/* Default header styles */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  font-weight: 300;
  color: #222222;
  line-height: 1.4;
}

h1 {
  font-size: 2.75rem;
}

h2 {
  font-size: 1.6875rem;
}

h3 {
  font-size: 1.375rem;
}

h4 {
  font-size: 1.125rem;
}

h5 {
  font-size: 1.125rem;
}

h6 {
  font-size: 1rem;
}


/* Base element styles */

body,
html {
  width: 100%;
  height: 100%;
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  font-size: 16px;
  color: #222222;
}

a,
a:hover {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 2rem 0;
  list-style: disc;
  padding-left: 2rem;
}

ul li {
  padding: 0.5rem 0;
}

p {
  margin: 1rem 0;
  line-height: 1.8;
}

.content {
  max-width: 60rem;
  margin: 0 auto;
  width: 100%;
}

.hero {
  position: relative;
  overflow: hidden;
  height: 30rem;
}

section {
  padding: 6rem 0 3rem;
}

<body style="background-color:darkgrey">
  <div  id="top">
    <div  id="chg-bg"></div>
    <h1>Do more, with less.</h1>
  </div>
  <section id="vision">
    <div >
      <h1>We Have a Vision</h1>
      <h2>For a world where users come first</h2>
      <p>Latte ideate unicorn food-truck hacker latte disrupt integrate user story latte. Innovate viral food-truck paradigm user story food-truck quantitative vs. qualitative responsive intuitive parallax. Disrupt engaging bootstrapping iterate pivot fund
        venture capita</p>
      <p>Bootstrapping ship it pair programming waterfall is so 2000 and late food-truck long shadow venture capital ship it moleskine sticky not</p>
    </div>
  </section>
</body>

CodePudding user response：

Can't you just put the style code directly?

<div  style='background-image: url(https://placeholder.com/800) !important;'></div>

CodePudding user response：

I think the problem with your Js and Css not showing the image when you apply then directly into your html file might be because of the relative path to your image. Try to use a full path instead