3

I am trying to add a background image with a linear gradient.

If I add the image without the linear gradient, the image appears. As soon as I add the linear gradient, neither of them work and it defaults back to the original background color in the section.

In the CSS below I have tried to combine the background image into one CSS declaration and divide it by a comma.

.education {
  background: linear-gradient(rgba(141, 153, 174, 0.8), (rgba(141, 153, 174, 0.5)), url("samuel-beckett-bridge.jpg") no-repeat fixed);
  background-size: cover;
}
<!-- // Education -->
<section id="education" class="education">
  <div class="content-wrap">
    <h2>Education</h2>

    <!-- School details: copy this whole block to add more schools. -->
    <h3>School name 2017 - present</h3>
    <p>Designation received</p>

    <!-- Add as many paragraphs as you need. -->
    <p>Summary.</p>
    <!-- End of school details. -->
  </div>
</section>
Stickers
  • 75,527
  • 23
  • 147
  • 186
Sarah
  • 53
  • 1
  • 1
  • 8

3 Answers3

13

It is definitely :

.education {
  background: linear-gradient(rgba(141, 153, 174, 0.8), rgba(141, 153, 174, 0.5)), url("samuel-beckett-bridge.jpg") no-repeat fixed;
  background-size: cover;
}

live solution : https://jsfiddle.net/v47dk902/

Sylvain
  • 238
  • 2
  • 15
2

You have inserted an extra curly bracket in background css. Kindly replace your background css with the following

background: linear-gradient(rgba(141, 153, 174, 0.8), rgba(141, 153, 174, 0.5)), url("samuel-beckett-bridge.jpg") no-repeat fixed);

Thanks

hasanbaluch
  • 58
  • 8
0

If you're working with transparent background images, you will need to switch the order so the gradient appears beneath the image. You will want to list the image, repeat, and positioning info first, followed by a comma, followed by the gradient info.

So, using the code used above as an example:

.education {
    background: url("samuel-beckett-bridge.jpg") no-repeat fixed, linear-gradient(rgba(141, 153, 174, 0.8), rgba(141, 153, 174, 0.5));
    background-size: cover;
}
josh1978
  • 698
  • 7
  • 19