I am trying to add a linear gradient to an img. while having a border

Question

Here is my html code:

 <div class="container" style="margin-top:30px">
      <div class="row">
        <div class="col-sm-4">
          <h2>About Me</h2>
          <h5>Photo of me:</h5>
          <div class="party">
          <img class="party-img" src="party.jpg"></img>
          </div>

Here is my css code:

.container .row .col-sm-4 .party {
    border-left: 5px solid black;
    border-bottom: 3px solid black;
    border-top: 1.7px solid black;
    border-right: 1.7px solid black;
    
}

.container .row .col-sm-4 .party .party-img img{
    position: relative;
    z-index: -1;
    background-image: linear-gradient(to right, yellow, blue)

}

when I apply the gradient, the gradient is nonexistent.

apply it to .party also your last selector will select nothing — Temani Afif, Aug 08 '20 at 22:56
https://stackoverflow.com/questions/23935758/gradient-over-img-tag-using-css — s.kuznetsov, Aug 08 '20 at 23:13

score 0 · Answer 1 · edited Aug 09 '20 at 06:38

0

Hello can you try this css it will solve :)

.bg-img {
    position: relative;
    width: 100%;
    height: 100%;
    background: url('http://unsplash.it/1200x800') center center no-repeat;
    background-size: cover;
    background-image: linear-gradient(to bottom right,#002f4b,#dc4225);
    opacity: .4;
}

edited Aug 09 '20 at 06:38

Ma3x

5,761
2
17
22

answered Aug 08 '20 at 22:57

Mardic

1

I feel like it has to do with something about my selectors. I tried the code you suggested and it is still not applying to the image. I also tried to use px instead vh and percentages on resizing(just for testing purposes) but it doesn't seem to affect the image at all. – Travis Quigg Aug 08 '20 at 23:12

Ma3x · Answer 2 · 2020-08-09T06:28:09.653

Your second CSS rule's selector does not match any element, that's why you do not see the effects of your second CSS rule.

The last part .party-img img is trying to select a DOM element with the tag img that is a child (at any depth) of another DOM element with a class party-image. Since that does not exists in your layout, it matches nothing.

This means that you have to change you selector to .container .row .col-sm-4 .party img.party-img or simply .container .row .col-sm-4 .party .party-img

The img.party-img means to match an <img> element that also has the class party-img.

Keep in mind that the 2 versions above are not the same, the first one will only match an <img class="... party-img ...some-other-class">, while the second one will match any tag that has the class party-img. In your case that produces the same results, but something to keep in mind if your layout will ever change.

Additionally, as already mentioned in the comments, the <img> element does not have an end tag in HTML. Change it to just <img ... >, in your case <img class="party-img" src="party.jpg">.

If the gradient is still not showing up as you would want it to after these changes are made, check the other SO answer linked in the comments to your original question.

I am trying to add a linear gradient to an img. while having a border

2 Answers2