CODEWITHSUNDEEP
htmlangularcss
kovac
kovac

Reputation: 5389

Inline CSS to Angular 2 - linear-gradient to background image

I have the usual css style like:

.main-body {
    height: stretch;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 100%), url('../assets/img/background.png');
}

In the above, I need to move

background-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 100%), url('../assets/img/background.png');

to inline styling. I'm trying to do it as below:

UPDATE:

<div class="container-fluid main-body" [ngStyle]="{'background-image': 'linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.6) 100%), url(backgroundUrl)'}">>
</div>

However, this is not working. It's picking up the right styling, however, it can't locate the backgroundUrl which is defined in the component.

ANSWER:

Okay, found the error. Just needed to use it as below:

<div class="container-fluid main-body" [ngStyle]="{'background-image': 'linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.6) 100%), url('+backgroundUrl+')'}">
</div>

Upvotes: 1

Views: 2462

Answers (2)

Marvel Moe
Marvel Moe

Reputation: 935

I think the issue is with the url being added. Angular has a weird thing with inlining background images that requires forward slashes and backslashes. In my own project, I added: 

[ngStyle]="{'background-image': 'linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 100%), url(\'assets/images/generic-car.jpg\')'}"

and it did show up inlined. I attached a screenshot of it.

enter image description here

Upvotes: 2

Sagar Kamble
Sagar Kamble

Reputation: 590

I guess that you missed some "'"

<div class="container-fluid main-body" [ngStyle]="{'background-image': 'linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 100%), url(\'../assets/img/background.png\')}'">

I am not sure about this(escape) -> ...\'../assets/img/background.png\'...

You can try moving it to variable like,

 <some-element [ngStyle]="{'font-style': styleExp}">...</some-element>

Upvotes: 0

Related Questions