-1

How to add linear-gradient colour with background-image on same element or div? I want to add background-image with linear-gradient on same html element or div. But I am unable to do it so. Any help would be appreciated.

Here is my CSS below:

.dvNav {
  flex-direction: column;
  display: flex;
  padding: 0.5rem 1rem 0 1rem;
  background: rgb(28, 3, 25);
  /* background: url(/images/amey.png) no-repeat top right; */
  background: linear-gradient(
    180deg,
    rgba(28, 3, 25, 1) 0%,
    rgba(35, 1, 26, 1) 35%,
    rgba(52, 1, 34, 1) 100%
  );
  color: var(--white-color);
  height: 100vh;
}
me at stackoverflow
  • 43
  • 1
  • 8
  • Do you want the background image(the one with a url) to cover the whole of the element or do you want it to always show all of it? And is there a reason for it being aligned to the right of the element rather than for instance centered? – A Haworth Jul 05 '22 at 08:47
  • And is the linear gradient to be semi transparent and over the top of the image or is it to go underneath he image? – A Haworth Jul 05 '22 at 08:49

1 Answers1

1

If you wanted to add a semi opaque/semi transparent colour gradient that goes on top of the background image, your first thought might be to overlay another div

However, the easiest way to do it is to just add another parameter to the background-image css rule.

#show_bg {
    background-image: url('https://picsum.photos/200/300');
    width: 80%;
    height: 200px;
    background-size: cover;
    color: white;
}

#show_bg_2 {
    background-image:
    linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73)),
    url('https://picsum.photos/200/300');
    width: 80%;
    height: 400px;
    background-size: cover;
    color: white;
    padding: 20px;
}
<div id='show_bg'>something here</div>
<br/>
<div id='show_bg_2'>something here</div>
sohaib
  • 574
  • 5
  • 16