CSS background image url not showing up

Question

I can't figure out why this background image does not show up. But when I using content:url() it showing up. The problem using content:url(), I can't control image size. Bellow I provide the complete the code as your reference.

Component

@Component({
      selector: 'app-reset-password',
      template: `
      <form>
      <h2 class="dialog-form-title">RESET PASSWORD</h2>
      <div class="warning-messages"><span class="warning_image">This User ID will no longer be able to log in with their 
      previous password.</span></div>
      <div class="dialog-form-footer" fxLayoutGap="20px">
        <button mat-flat-button type="submit" [mat-dialog-close]="true" style="margin:5px;background:#2BA9F8;">Confirm</button>
        <button mat-flat-button type="button" [mat-dialog-close]="false" style="margin:5px;background:#D3D3D3">Cancel</button>
      </div>  
    </form>
      `,
      styles: ['.warning-messages{background-color: #FFFEEF; color: #D9B88A; padding: 20px 10px; margin-bottom: 10px; font-weight: 400; }.warning_image:before{background-image: url("https://cdn1.iconfinder.com/data/icons/crime-and-security-3-5/48/147-128.png");}.warning_image:before{display: inline-block;vertical-align: middle;background-size: 12px auto;}']
    })

This is DEMO

Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a Stack Snippet. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See Something in my website/example doesn't work can I just paste a link. — Paulie_D
– Paulie_D, Commented Oct 24, 2019 at 9:32
@Paulie_D Thanks for your comment.. Sorry!.. I will not repeated it in the future — Pravu
– Pravu, Commented Oct 24, 2019 at 9:36

Kartik Bhalala · Accepted Answer · 2019-10-24 09:28:39Z

4

For pseudo element you must have to define content property.Instead of using before you can directly apply background image to warning-messages class.

.warning-messages{
  background-image: url("https://cdn1.iconfinder.com/data/icons/crime-and-security-3-5/48/147-128.png");
  background-repeat: no-repeat;
}

answered Oct 24, 2019 at 9:28

Kartik Bhalala

3921 silver badge11 bronze badges

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

5 Comments

Pravu Over a year ago

How to display image before text and inline?

Kartik Bhalala Over a year ago

You want image above text or side by side?

Pravu Over a year ago

I want side by side

Pravu Over a year ago

image first and than text

Kartik Bhalala Over a year ago

For side by side, You have to use <img /> instead of background image.

Collectives™ on Stack Overflow

CSS background image url not showing up

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related