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
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>try to put the background style in the html style parametere it's working from my side