Angular 5 background image will not show

Question

I need help. I'm a complete beginner and I can't find solution anywhere, so sorry if it was already asked, but no matter what I tried I couldn't display background image on one page.

What I want to do?

Display the background image on home page.

Notes:

• I didn't have assets folder by default.
• Trying on Localhost:4200
• Going to Localhost:4200/assets/images/bg.jpg in browser displays the picture.
• If I put an online hosted image in url(), everything works.

---

Since there was no assets folder in my root, I created one in src folder.

Structure:

► node_modules
▼ src
   ▼ app
      ▼ components
         ▼ home
           home.component.html
           home.component.scss
           home.component.spec.ts
           home.component.ts
   ▼ assets
      ▼ images
         ▼ bg.jpg

---

.angular-cli.json

  "assets": [
    "assets",
    "images",
    "favicon.ico"
  ],

---

home.component.scss

.homeBg {
  background-image: url('../../../assets/images/bg.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  width: 100vw;
  height: 100vh;
}

---

Can someone please help me and tell me what I did wrong? I'm losing my mind for almost 3 hours trying to figure this out.

Thanks in advance.

Answer 1

Solved here.

This is because you've also specified "no-repeat" along with your background image. Alter your code to:

background: url('../../../assets/images/bg.jpg') no-repeat center center fixed;

Thanks @Mike Lun for reminding me to check the actual error.