how can i change the background image of a jsx file

Question

so i'm using a components where i want to have a background image in the component home.jsx and then when i log in the page i use another component called home_logged.jsx where i don't want a background image but yet the files keeps infected by each other

this is the css of the home.css

body
{
    background-color:#EFEFEF ;
    background-image:url("../../images/dog.jpeg");
    background-size:cover ;
    background-repeat: no-repeat;
    background-position: 20px 15px;
    height: 610px;
}
.head-div
{
    margin-top:9rem;
}
h1
{
    font-size: 50px;
    padding-left: 80px;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif ;
    color: rgb(141, 82, 15);
}
p
{
    line-height: 19px;
    padding-left: 80px;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif ;
    color:#ffca2c;   
}
.btn-warning
{
    margin-top:20px;
    margin-left: 80px;
    color:blanchedalmond;
    font-weight: bold;
    box-shadow: 5px 3px 10px #363631;
    padding-left: 25px;
    padding-right: 25px;
    border-radius: 44px; 
}

and this is my home_logged.css

body
{
    background-color:#EDEDED ;
    background-image: none;
}
#row_home_logged
{
    margin-top: 7rem;
}
#doggy
{
    background-image:url("../../images/doggy.png");
    background-color: #8ACAD9;
    background-size: 329px ;
    background-repeat: no-repeat;
}
#catty
{
    background-image:url("../../images/catty.png");
    background-color:#F8B8B8;
    background-size: 300px ;
    background-repeat: no-repeat;
}
#mixed
{
    background-image:url("../../images/mix.png");
    background-color:#F8C808;
    background-size: 225px ;
    background-position-x: 20px;
    background-repeat: no-repeat;
}
.dogh3
{
    padding-left: 300px;
    margin-top: 220px;
    color:rgb(39, 39, 39)
}
.link1
{
    padding-left : 300px;
    text-decoration:none;
    color: aliceblue;
    display: block;
    padding-bottom: 0px;
    font-size: 20px;
}
._link1
{
    display: block;
    padding-left : 300px;
    color: aliceblue;
    margin-bottom: 38px;
    line-height: 0px;
}
.mixh3
{
    padding-left: 236px;
    margin-top: 220px;
    color:rgb(39, 39, 39)
}
.mix1
{
    padding-left: 236px;
    text-decoration:none;
    color: aliceblue;
    display: block;
    padding-bottom: 0px;
    font-size: 20px;
}
._mix1
{
    display: block;
    padding-left: 236px;
    color: aliceblue;
    margin-bottom: 38px;
    line-height: 0px;    
}

so i need to know how to separate the body between them

Answer 1

You can maintain the image state in your JSX file itself and share it with the css file using data-*.

I have shared a small example on how to pass image background image using javascript.

var list = document.querySelectorAll("div[data-image]");

for (var i = 0; i < list.length; i++) {
  var url = list[i].getAttribute('data-image');
  list[i].style.backgroundImage="url('" + url + "')";
}

div[data-image] {
  width: 100px; height: 100px; /* If needed */
  border: 2px solid black;
}

<div data-image="https://images.unsplash.com/photo-1638913972776-873fc7af3fdf?auto=format&fit=crop&w=100&q=100"></div>

Answer 2

try to put the background style in the html style parametere it's working from my side