How to set a responsive background image in angular 4 component

user_9175721 0
Viewed 7124

my question is very simple, I am developing an angular 4 app, and I need to place an image as a background in my component called Home, that occupies the entire browser window ONLY in my Home component... Below shows the structure of my application:

index.html:

<!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>MyAngularApp</title>
      <base href="/">

      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="icon" type="image/x-icon" href="favicon.ico">
    </head>
    <body>
      <app-root></app-root>
    </body>
    </html>

app.component.html:

<router-outlet></router-outlet>

app.component.ts:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

home.component.html:

<div class="background">
<p>Example</p>
</div>

home.component.css:

.background {
    width: 100%;
    background: url('../../assets/background.jpg') no-repeat;
    background-size: cover;
    color: white;
    text-align: center;
}

As you can see, what I need is that when rendering my home component, it shows as a background of my home component an image that occupies the entire browser window, the problem is that as I have tried ... the image does not take up the full screen of the browser, the image only occupies the background of the example sentence, and it is not responsive either.

Many thanks!

angular css html
3 Answers

Ive made a working stackblitz of your issue

https://stackblitz.com/edit/angular-hnxds3?file=src%2Fapp%2Fapp.component.html

you need to have your background css like this

.background {
   width: 100%;
   height: 100vh;
   background: url('../../assets/background.jpg') no-repeat;
   background-size: cover;
   color: white;
   text-align: center;
}

Here is a photo of it working, the white border around it is the default html padding/margin you will need to use something like normalize.css to remove it once you have done that the white border will go away and you will have an image that fills the whole screen

enter image description here

user_87241600

I had the same issue but some times my content exceeded the heigth: 100vh so that exceeded content didn't had the background. This worked for me 

.background-img {
    min-height: 100vh;
    background: url('...');
    background-size: cover;
    width: 100%;
    text-align: center;
}
user_114000640

This is in response to the previous answer suggesting to add a div spanning 100% of the width and height (I dont have enough points to add it as a comment to the answer itself)..
The solution is almost perfect except for the white borders on all 4 corners.

Add the following to the index.html to remove the edges. The image will then be displayed wall-to-wall:
you can test it out in the same stackblitz link provided in the answer

<body style="background-color:black;padding:0px; margin:0px;">
<my-app>loading</my-app>
</body>
user_16321820
Related