This method always works for me in normal html
and sass
without jsx but now using react it doesn't work, why is this?, the part header
appears blank and I had to create another img folder in src because there was a restriction for public.
const Header = () => {
return (
<div id="home">
<div className="home__landing">
<h1 className="heading-h1 margin-bottom-small">Welcome to Backery</h1>
<h2 className="heading-h2 heading-h2--white margin-bottom-huge">
Responsive Sass Theme about Sweets
</h2>
<a className="btn-white" href="#features">Sweet Start</a>
</div>
</div>
);
}
.home {
&__landing {
background-image: linear-gradient(to right bottom, rgba(var(--color-primary),.8),
rgba(var(--color-secondary),.8)), url("../../img/background.jpeg");
background-position: center;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
height: calc(100vh - 5.5rem);
display: flex;
flex-direction: column;
align-content: center;
justify-content: center;
align-items: center;
}
}
You must assign the className "home" to the first div in the same way that you assigned the className "home__landing" to the h1.