Search code examples
cssmedia-queriesbackground-imagelinear-gradients

Fade background in media query for small screens in CSS

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

enter image description hereenter image description here

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>
        <a href="contact.html" class="btn">Get started</a>
      </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.

Solution

  • 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><a href="contact.html" class="btn">Get started</a></p>
</section>