Angular not loading the styles completely

Question

I had followed the conventional method of including the style in the component. but styles are not reflected in the browser. However, only one property is reflected among many. if have 6 style properties in applied to a class only 1 property reflected.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'userbar',
  templateUrl: './userbar.component.html',
  styleUrls: ['./userbar.component.css']
})
export class UserbarComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

#userbar #wallpicture {
  background-image: url("https://i.pinimg.com/originals/73/d5/d4/73d5d48c16adf342d4364d027053176b.jpg");
  background-size: 100%;
  height: 95px;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  background-position: 0px 50%;
  width: 100%;
  padding: 0px;
}
#userbar {
  width: 100%;
}
#userbar #profilepicture {
 border-radius: 50%;
 position: relative;
 left: -webkit-calc(100% - 350px);
  left: -moz-calc(100% - 350px);
 left: calc(50% - 32px);
 top: 64px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="userbar">
  <div id="picturesection">
    <div id="wallpicture">
      <img id="profilepicture" src="/assets/images/general/userimage.png">
    </div>
  </div>
</div>

Answer 1

There are some illegal characters in the CSS, specifically the 'OBJECT REPLACEMENT CHARACTER' (U+FFFC)

Remove all the blank characters at the start of each line, and replace them with spaces

It should be working in the snippet below. I've replaced the relative URL with an absolute URL just to test it.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'userbar',
  templateUrl: './userbar.component.html',
  styleUrls: ['./userbar.component.css']
})
export class UserbarComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

#userbar #wallpicture {
  background-image: url("https://i.pinimg.com/originals/73/d5/d4/73d5d48c16adf342d4364d027053176b.jpg");
  background-size: 100%;
  height: 95px;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  background-position: 0px 50%;
  width: 100%;
  padding: 0px;
}
#userbar {
  width: 100%;
}
#userbar #profilepicture {
  border-radius: 50%;
  position: relative;
  left: -webkit-calc(100% - 350px);
  left: -moz-calc(100% - 350px);
  left: calc(50% - 32px);
  top: 64px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="userbar">
  <div id="picturesection">
    <div id="wallpicture">
      <img id="profilepicture" src="https://www.ienglishstatus.com/wp-content/uploads/2018/04/Cute-Whatsapp-DP.jpg">
    </div>
  </div>
</div>

Answer 2

please check your css.

#userbar , #wallpicture

#userbar, #wallpicture {
  background-image: url("https://i.pinimg.com/originals/73/d5/d4/73d5d48c16adf342d4364d027053176b.jpg");
  background-size: 100%;
  height: 95px;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  background-position: 0px 50%;
  width: 100%;
  padding: 0px;
}
#userbar {
  width: 100%;
}
#userbar, #profilepicture {
 border-radius: 50%;
 position: relative;
 left: -webkit-calc(100% - 350px);
  left: -moz-calc(100% - 350px);
 left: calc(50% - 32px);
 top: 64px;
}