background image is not displaying in browser in angular-CodePudding

I have to cover an image entire background for that I have written code in SCSS in angular project but it not going to display in browser. If anyone know the solution for this please answer for this question.

HTML

<div >
    
</div>

SCSS

.container {
left: 0px;
top: 0px;
height: 100%;
background-image: url('../../assets/images/Rectangle\ 12.png') no-repeat;
// background-position: center;
// background-repeat: no-repeat;
// background-size: cover;
// background-attachment: fixed;
}

CodePudding user response：

To set a percentage value for height, the parent's height must be determined then only height will work. otherwise you can specify the height and width manually like following and also remove no-repeat from background-image:

 .container {
    left: 0px;
    top: 0px;
    height: 100vh;
    width: 100%;
    background-image: url('../../assets/images/Rectangle\ 12.png');
    background-repeat: no-repeat;
  }

CodePudding user response：

The \ in your file name: Rectangle\ 12.png tells me you copied a filename with a space.

I would avoid spaces in files when dealing with urls. Just cause the correct way of writing spaces is so file name would be Rectangle 12.png. It make it get confusing to read. Rename the file with a _ or - to make it more readable.

Other than that don't bother with relative paths in you css url functions in angular. If you rename the file space with _ the path would be url('/assets/images/Rectangle_12.png') else if you leave as is it would be with as the space so meaning: url('/assets/images/Rectangle 12.png')