CODEWITHSUNDEEP
javascriptcssangular
Anton Emery
Anton Emery

Reputation: 87

Angular 2 setting background image and color in [ngStyle]

I am working on an Angular 2 project and trying to set both a background image and a opaque gradient using [ngStyle] These will eventually be variables pulled from JSON, or else I would just write them in my SCSS file. This is the code I am trying to use but it's not working. I can set either a background color or image using [ngStyle], but not both.

<header [ngStyle]="{
    'background': 'linear-gradient(0deg, rgba(119, 233, 207, 0.5), 
     rgba(119, 233, 207, 0.5)), 
     url('example.com/image.png') center center / cover no-repeat'
}">

This code in my SCSS file gives me exactly the result I want.

header {        
    background: linear-gradient(0deg, rgba(119, 233, 207, 0.5), 
    rgba(119, 233, 207, 0.5)), 
    url('example.com/img.png');
}

Does anyone know if it is possible to specify both a background image and a opaque gradient using [ngStyle]? Thanks!

Upvotes: 2

Views: 4424

Answers (1)

Steve G
Steve G

Reputation: 13357

The problem that you're having stems from the usage of single-quotes (') in the url() property. (Honestly, I'm surprised it doesn't throw an error.)

Removing them displays your desired result:

For Example:

<header [ngStyle]="{
  'background': 'linear-gradient(0deg, rgba(119, 233, 207, 0.5), 
                rgba(119, 233, 207, 0.5)), 
                url(example.com/img.png) center center / cover no-repeat'}">

Working Plnkr

Unfortunately, the standard escape (\') does not seem to work in this context, but removing the single-quotes entirely is valid as well (assuming the value used for url() is URL-Encoded).

Upvotes: 3

Related Questions