CODEWITHSUNDEEP
htmlcss
Célian CREPIN
Célian CREPIN

Reputation: 23

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

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 class="hero" id="top">
    <div class="hero-image" id="chg-bg"></div>
    <h1>Do more, with less.</h1>
  </div>
  <section id="vision">
    <div class="content">
      <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>

Upvotes: 1

Views: 56

Answers (1)

Carlos Alves Jorge
Carlos Alves Jorge

Reputation: 1995

Can't you just put the style code directly?

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

Upvotes: 1

Related Questions