Fade background in media query for small screens in CSS - css

Question

I am trying to take this simple page with text on the left and an image on the right and add a media query so that the image fades to the background and becomes very light behind the text. I have tried adding linear gradients but nothing seems to be working. I set the image to display none at first thinking i would just add it again as a background image after since css moves from top to bottom but that just made my screen background white. Then I added this linear gradient which is not working at all although it is showing up in dev tools and not crossed out or anything.
I tried setting home-img to display none and then adding background image to body or section.
As you can see in the first image, it looks fine. The second is where I am having trouble with the code. I would like the background to be very light so you can read the text. Attached are my code snippets.
I tried editing home-img in the media query.https://github.com/aloha-suzanne/propelagency
HTML:
<section class="home">
<img
src="images/home-img.jpg"
class="home-img"
alt="man in striped shirt sitting on a bean bag chair while typing on his laptop"
/>
<div class="home-content">
<h1>Everything you need to succeed online.</h1>
<p>
We use strategic creativity to distinguish our clients from
competitors, let their message stand out, connect and resonate with
the audience.
</p>
Get started
</div>
</section>
CSS:
section {
display: flex;
flex-direction: column;
height: 100vh;
align-items: center;
padding: 100px;
margin-top: 60px;
}
section.home {
flex-direction: row;
margin-top: 0;
}
.home-img {
position: absolute;
bottom: 0;
right: 0;
height: 110%;
}
#media (max-width: 995px) {
.logo {
top: 10px;
left: 40px;
font-size: 1.5rem;
}
section {
padding: 100px 40px;
}
.navigation ul li a {
font-size: 2rem;
}
section {
background-image: linear-gradient(
rgba(255, 255, 255, 0.561),
rgba(255, 255, 255, 0.561)
),
url(images/home-img.jpg);
background-size: cover;
}
}
#media (max-width: 680px) {
h1 {
font-size: 1.5rem;
margin-top: 150px;
}
.home-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
}
I've tried setting the home image to display: none and then adding it again as a background image with a linear gradient. That is making the background appear gray but not applying the image.

Answer 1

I think your linear gradient syntax isn't quite correct. This gradient generator is excellent for creating gradients which work.
section {
background: linear-gradient(180deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.9) 50%), url(https://images.pexels.com/photos/3277805/pexels-photo-3277805.jpeg);
background-size: cover;
width: 300px;
padding: 10em 1em 1em;
}
<section>
<h1>Everything you need to succeed online.</h1>
<p>
We use strategic creativity to distinguish our clients from
competitors, let their message stand out, connect and resonate with
the audience.
</p>
<p>Get started</p>
</section>