Overlay image in Angular using Bootstrap

Question

I am new to web development and am using Angular with Bootstrap to develop a practice project. I want to have a header component and in my app.component I am calling the header component. Now In the app.component, I want to have a background image which covers around 50% of the screen including the header. I have tried implementing this, but somehow it is appearing to be wrong. There are couple of issues I am facing.

1) When I scroll down, it looks odd and appears as if the bottom portion of page goes on top of the image.

2) The image is not getting shown in full. Here is my image, if you look in my implementation, the entire image is not getting displayed.

Here is the Stack blitz link to My work.

Please view the demo in full screen: Demo Url

Answer 1

If I understand you correctly, the problem with the css (app.component.css) in 2 rules:

background-attachment: fixed;

determines whether that image's position is fixed within the viewport, or scrolls along with its containing block.

^{https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment}

So I removed it.

Also:

background-size: 100% 100%;

Which stretch the image to full width / height. In your case, I guess you want that it will take only the full width so the way to do this is:

background-size: 100% auto;

The result is:

https://stackblitz.com/edit/angular-rbtcs9?file=src/app/app.component.css

Let me know if it that you are looking for.