CODEWITHSUNDEEP
htmlcssangular
AlejoDev
AlejoDev

Reputation: 3252

How to set a responsive background image in angular 4 component

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!

Upvotes: 3

Views: 8563

Answers (3)

sgClaudia98
sgClaudia98

Reputation: 256

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;
}

Upvotes: 3

MaxxD
MaxxD

Reputation: 71

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>

Upvotes: 1

Smokey Dawson
Smokey Dawson

Reputation: 9230

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

Upvotes: 2

Related Questions