CODEWITHSUNDEEP
css
Noober
Noober

Reputation: 1626

Overlay image in Angular using Bootstrap

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

Upvotes: 3

Views: 1213

Answers (1)

Mosh Feu
Mosh Feu

Reputation: 29277

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.

Upvotes: 2

Related Questions