Hey there, I've been trying to add a background image to my AngularJS website, but I'm facing some challenges. I have followed several tutorials and examples that work, but I specifically want the background image to be placed at the bottom of the page, above the footer, while not interfering with the content on top.
The issue seems to be a gap that is preventing the background from extending to the bottom. I've tried adjusting the div and image sizes to 100% width/height, but it hasn't made a difference.
When setting the background image in CSS, it crops the image or forces it to stay at the top rather than at the bottom where I want it. Even using a div and filling it with a background has not solved the problem.
I've shared some snippets of my code below for reference:
.form-wrapperBack {
width: 100%;
height:500px;
color:#fff;
background-image:url("/img/river.png");
background-repeat:no-repeat;
background-height:100%;
background-position:center bottom;
I have also included sections of my index.html and style.css files along with details of the issues I'm facing. Any assistance or suggestions on achieving the desired background setup would be greatly appreciated.