How to add linear-gradient with background-image on same element? [duplicate]

Question

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;
}

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
– A Haworth, Commented Jul 5, 2022 at 8: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
– A Haworth, Commented Jul 5, 2022 at 8:49

Sohaib Ashraf · Accepted Answer · 2022-07-05 07:29:03Z

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>

answered Jul 5, 2022 at 7:29

Sohaib Ashraf

80613 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

me at stackoverflow Over a year ago

I just want an image as background and linear-gradient also on .dvNav class.

Sohaib Ashraf Over a year ago

Try to give linear gradient and bg to background-image key .dvNav { flex-direction: column; display: flex; padding: 0.5rem 1rem 0 1rem; background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73)), url('/images/amey.png'); color: var(--white-color); height: 100vh; }

me at stackoverflow Over a year ago

this worked but i got background white. I want transparent backgorund image

Sohaib Ashraf Over a year ago

Give opacity too

Collectives™ on Stack Overflow

How to add linear-gradient with background-image on same element? [duplicate]

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related