Angular 4 full image background

html css angular dom

17,282

You could add a class to the div surrounding your app entry.

index.html

<style>
  .bg{
    width: 100%;
    height: 100%;
    background: url('your-url') no-repeat center;
    background-size: 100% 100%;
    background-position: top center;
  }
</style>
  ...
  <div class="bg">
    <app>
      Loading...
    </app>
  </div>

17,282

Author by

Kerim Çevik

Updated on June 04, 2022

Comments

Kerim Çevik almost 2 years
I'm new to the angular framework and TypeScript and I came across this issue while i was creating a simple page.

I wanted to give the page a full image background, but the background image would only appear behind the child elements (see image) of the the HTML-tag. So after a lot of trying and failing I tried to do the same thing but instead in an online html,css editor (see snippet). And this editor gave the expected and wanted result??? Am I missing a DOM element above the html or does angular 4 framework add another root???

Current situation
```
html { 
    background: url(http://www.apicius.es/wp-content/uploads/2012/07/IMG-20120714-009211.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
```
```
<html>
    <body>
        <div>
            <h1>Title</h1>
            <h3>Subtitle</h3>
        </div>
    </body>
</html>
```
- JayDeeEss over 6 years
  
  try making the main parent divs height 100%, it needs some container to render the image! or set the html or body height and width 100%
Kerim Çevik over 6 years

Thank you so much I edited the index.html file, which was the parent of all. And now i can put a full image background.