Angular 2 CSS background

Angular 2 CSS background property it allows us to set in one time all the background properties for an HTML element. (e.g. div)

We can set this list of properties: background-color, background-image, background-position, background-size, background-repeat, background-origin, background-clip, and background-attachment.

angular 2 css background
angular 2 css background
try angular 2 css background
try angular 2 css background

Let’s build an example.

Angular 2 CSS Background example
Angular 2 CSS Background example

 

This is the code source of our example:

/**
 * Created by Tareq Boulakjar. from angulartypescript.com
 */
import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: `<h3 class="angular-2-css-background">Angular 2 CSS Background Property Example </h3>
               <hr>
               <p>
                We explain CSS Background property.  The property syntax:<br>


               </p>

               <p>
                We can set this list of properties: background-color, background-image, background-position,<br>
                background-size, background-repeat, background-origin, background-clip, and background-attachment.<br>
               </p>


               `,
    styles:[`
                        .angular-2-css-background {
                          color:#00b3ee;
                        }

                        p {
                           background: #00ff00 url("http://angulartypescript.com/wp-content/uploads/2016/03/css-backgroud-example.jpg") repeat fixed center;
                            color: #ffffff;
                        }

                        span {
                          color: #e57c00;
                        }


           `],

})
export class Angular2CSSBackgroundComponent { }

 

 

Done !