Is there a way to get 2 background images over eachother in the nav/navbar?

user_9910833 0
Viewed 32

here is the CSS i am trying to make work. this class is in the nav/navbar. i want the background color as listed, then i want the gradient, then i want the SVG pattern over it, and then i want the navbar text and links on top of all of that. the way i have it now, though, the most "recent" background-image overwrites the first one.. meaning i have to pick between the gradient OR the SVG pattern with the background-color coming thru.

.infinesseHeader {
    background-color: #2A3694;
    background-image: linear-gradient(-225deg, #852574 0%, #4757B5 29%, #3543A0 67%, #852574 100%);
    background-image: url(/assets/images/cubes-tile.svg);
    background-size: contain;
}

is there a way to put the background gradient behind the SVG file? maybe a workaround to them both being background-image values?

css
1 Answers
.infinesseHeader {
    background-color: #2A3694;
    background-image: url(/assets/images/cubes-tile.svg), linear-gradient(-225deg, #852574 0%, #4757B5 29%, #3543A0 67%, #852574 100%);
    background-size: contain;
}

CSS allows you to specify multiple background images. They are separated by commas, and are stacked on top of each other, meaning that the first image will take priority over the other.

Example:

.infinesseHeader {
  width: 70vw;
  height: 70vh;
  background-color: #2A3694;
  background-image: linear-gradient(-225deg, rgba(133, 37, 116, 0.7) 0%, rgba(71, 87, 181, 0.7) 29%, rgba(53, 67, 160, 0.7) 67%, rgba(133, 37, 116, 0.7) 100%), url("https://s4.uupload.ir/files/5c29cf910a706_8m.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
<div class="infinesseHeader"></div>

user_135463830
Related