Dynamically changing background image and other properties on a component

user_10896690 0
Viewed 52

So I want to be able to directly edit the Headers properties on different pages. I want to dynamically change the background image, title and subtitle. I have tried to change the background image already, but to no avail. I was wondering if someone could point me into the right direction on how to change the background, as well as the title and subtitle.

This is the Home Screen ReactJS

import Card from "../components/Card";
import Footer from "../components/Footer";
import Header from "../components/Header";

import Slider from "../components/ImageSlider/Slider";

import "./HomeScreen.css";

const HomeScreen = () => {
  return (
    <container className="container">
      <Header style="background-image: url(https://images.pexels.com/photos/1509534/pexels-photo-1509534.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)" />
      <div className="homescreen">
        <h2 className="homescreen__title">Latest Artwork</h2>
        <div className="homescreen__paintings">
          <Card />
          <Card />
          <Card />
          <Card />
        </div>
        <div className="homescreen__slider">
          <div className="featured__products">Featured Products</div>
          <Slider />
        </div>
      </div>
      <Footer />
    </container>
  );
};

export default HomeScreen;

This is the HomeScreen CSS:

.container {
  width: 100%;
  max-width: 1440px;
}

.homescreen {
  max-width: 1440px;
  margin: auto;
  padding: 0 1.5rem;
}

.homescreen__title {
  display: flex;
  justify-content: center;
  font-size: 1.5rem;
  color: #666;
  margin-top: 1rem;
  padding: 40px 0px;
}

.homescreen__paintings {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1rem;
}

.homescreen__slider {
  padding-top: 60px;
}

.featured__products {
  display: flex;
  justify-content: center;
  position: relative;
  color: #666;
  font-size: 26px;
  font-weight: normal;
  font-family: "Kelly Slab", cursive;
  padding-bottom: 4rem;
}

@media (max-width: 1232px) {
  .homescreen__paintings {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 950px) {
  .homescreen__paintings {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 630px) {
  .homescreen__paintings {
    grid-template-columns: 1fr;
  }
}

This is the Header ReactJS:

import "./Header.css";

const Header = () => {
  return (
    <div className="header">
      <div className="header__title">MERN Art</div>
      <div className="header__subtitle">Acrylic Paintings Coated In Resin</div>
    </div>
  );
};

export default Header;

This is the Header CSS:

.header {
  height: 300px;
  padding-top: 4rem;
  min-height: 3rem;
  color: #fff;
  background-image: url(https://images.pexels.com/photos/2179483/pexels-photo-2179483.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
  background-size: cover;
  background-position: 50% 35%;
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.header__title {
  padding: 1rem 1rem;
  font-size: 1.6rem;
}

.header__subtitle {
  padding: 1rem 1rem;
  font-size: 1.3rem;
}

What am I doing incorrect here? How would I dynamically change the title and subtitle too? Thank you in advance, I am looking forward to hearing some possible solutions!

reactjs css html javascript
1 Answers

Problem

If you want to use react and learn it you should read whole documentation first. In this example you need to use props - here is a link where you can read more about it.

Solution

In your example you should pass all elements that you want to be dynamic by props into Header component:

 <Header title="testTitle" subtitle="testSubtitle" backgroundUrl="https://images.pexels.com/photos/1509534/pexels-photo-1509534.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />

Now you can use it inside header component and get it from props:

const Header = (props) => {
  return (
    <div className="header" style={{backgroundImage: `url(${ props.backgroundUrl })`}}>
      <div className="header__title">{ props.title }</div>
      <div className="header__subtitle">{ props.subtitle }</div>
    </div>
  );
};

To change styles you have to pass them as an object, not the same way as in css. Here you can read about it also. Now when you change title and subtitle in the HomeScreen component it will change background, title and subtitle in the Header component.

Demo

Here you can see it in action - link. I changed background url to another one because it was unreadable. You can see there that it works fine and if you change backgroundUrl, title or subtitle it will also change it in header.

user_134850900
Related