Search code examples
htmlcssbackground-imageopacitytransparent

Multiple transparent background images

I have two background jpeg images that are repeated vertically across the entire left and right borders of my website.

Here is my code:

.gradients {
background-image: url("outer-gradient.jpg"), url("outer-gradient-horizontal-flip.jpg");
background-position: top left, top right;
background-repeat: repeat-y;
}

<body>
  <div class="gradients">
    <div> website content in here </div>
  </div>
</body>

This is what it looks like:

left and right background images

I need a way to make both of these jpegs transparent.

Please don't suggest I just use CSS gradients, I cannot use CSS Gradients because of the color complexity needed to make the left and right images the way they were. These jpegs have hundreds of colors for a richer gradient than any CSS Gradient could make.

I've seen methods of making a single background image transparent by adding an opacity div in front or behind it. How would I do this for my .gradient div, when I have two background images?

Solution

  • I need a way to make both of these jpegs transparent.

    As you can't simply give opacity to the gradients div, which would affect the website content as well, you could use pseudo elements, like this, which will not effect the website content

    .gradients {
  position: relative;
  padding: 0 60px;         /*  for this demo, push the content off the image  */
}
.gradients::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;             /*  width of your jpg file  */
  height: 100%;
  background-image: url(http://placehold.it/50/00f);
  background-position: top left;
  background-repeat: repeat-y;
  opacity: 0.5;
  z-index: -1;
}

.gradients::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;             /*  width of your jpg file  */
  height: 100%;
  background-image: url(http://placehold.it/50/f00);
  background-position: top right;
  background-repeat: repeat-y;
  opacity: 0.5;
  z-index: -1;
}
    <body>
  <div class="gradients">
    <div>
      website content in here<br>
      website content in here<br>
      website content in here<br>
      website content in here<br>
      website content in here<br>
      website content in here<br>
    </div>
  </div>
</body>