Hi,
I am having trouble showing a background img in my react-app when deploying it to Netlify.
https://ubiquitous-druid-e3adce.netlify.app/
Here’s the JSX:
import { useState } from “react”;
import styles from “./Hero.module.css”; // Import your CSS file for styling
const Hero = () => {
const [height, setHeight] = useState(0);
const [weight, setWeight] = useState(0);
const [age, setAge] = useState(0);
const [bmi, setBmi] = useState(0);
const [caloriesForWeightGain, setCaloriesForWeightGain] = useState(0);
const [caloriesForWeightLoss, setCaloriesForWeightLoss] = useState(0);
const calculateBMI = () => {
// BMI calculation
const bmiValue = (weight / Math.pow(height / 100, 2)).toFixed(2);
setBmi(bmiValue);
// Calculate calories for weight gain and loss (you can use any formula here)
const bmr = 88.362 + 13.397 * weight + 4.799 * height - 5.677 * age;
setCaloriesForWeightGain(Math.round(bmr + 500));
setCaloriesForWeightLoss(Math.round(bmr - 500));
};
const getBmiRangeColor = (bmi) => {
if (bmi < 18.5) return “Underweight”;
if (bmi >= 18.5 && bmi < 24.9) return “Normal Weight”;
if (bmi >= 25 && bmi < 29.9) return “Overweight”;
return “Obese”;
};
const bmiRangeColor = getBmiRangeColor(bmi);
const handleCalculateClick = () => {
calculateBMI();
};
return (
BMI Calculator
Height (cm):
<input
type=“number”
value={height}
onChange={(e) => setHeight(e.target.value)}
/>
Weight (kg):
<input
type=“number”
value={weight}
onChange={(e) => setWeight(e.target.value)}
/>
Age:
<input
type=“number”
value={age}
onChange={(e) => setAge(e.target.value)}
/>
Calculate BMI
BMI: {bmi}
Calories for Weight Gain: {caloriesForWeightGain} Kcal/day
Calories for Weight Loss: {caloriesForWeightLoss} Kcal/day
BMI Range: {bmiRangeColor}
<div className={
bmi-range-color ${bmiRangeColor.toLowerCase()}} />);
};
export default Hero;
Here’s the CSS:
-
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: “Poppins”, sans-serif;
}.outbox{
display: flex;
align-items: center;
justify-content: center;
height: 100% !important;
background-image: url(‘…/src/assets/image.jpg’);
background-size: cover;
background-position: center;
}.container {
width: 30rem;
/* background-color: white; */
border-radius: 30px;
background: rgba(227, 221, 210, 0.73);
padding: 30px;
height: fit-content;}
@media screen and (max-width: 321px) {
.container {
width: 18rem !important;
/* background-color: white; */
padding: 30px;
height: fit-content;}
.heading{
font-size: 150% !important;
}}
@media screen and (max-width: 426px) {
.container {
width: 22rem;
/* background-color: white; /
/ border-radius: 10px; */
padding: 30px;
height: fit-content;
}
}.heading{
text-align: center;
font-size: 200%;
font-weight: bolder;}
p{
font-size: 20px;}
/* App.css */
/* Styling for the entire BMI calculator container /
/ .bmi-calculator {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #f0f0f0;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
text-align: center;
} */
/* Styling for labels and input fields /
/ label {
display: block;
margin-bottom: 5px;
font-weight: bold;
} */
input[type=“number”] {
width: 100%;
padding: 5px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
/* Styling for the Calculate button */
button {
background-color: #007bff;
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
}
.button{
text-align: center;
}
/* Styling for the BMI value, calorie information, and BMI range */
p {
margin: 10px 0;
font-weight: bold;
}
/* Styling for the color-coded BMI range indicator */
.bmi-range-color {
width: 20px;
height: 20px;
display: inline-block;
border-radius: 50%;
margin-left: 10px;
}
.underweight {
background-color: blue;
}
.normalweight {
background-color: green;
}
.overweight {
background-color: yellow;
}
.obese {
background-color: red;
}