how can i change the background image of a jsx file-CodePudding

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

CodePudding user response：

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>

CodePudding user response：

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