How to set a background image in Angular

In this tutorial, we are going to learn about how to set a background image in angular using inline styles and external CSS.

Setting image using inline styles

Example:

<div [ngStyle]="{backgroundImage:'url(./images/rose.png)'}" >    <h1>Rose image</h1>
</div>

In the above code, we have used the angular ngStyle attribute directive to set a background-image to the div element.

Don’t forget to wrap the url() function with single quotes, otherwise angular treated it as a property.

Setting image using external CSS

Example:

<div class="container">
    <h1>Rose image</h1>
</div>

.container{
    background-image: url(./images/rose.png);
}

In the above code first, we have added a container class to the div element, inside the CSS file we set a background image to the container class using background-image property.