TalonHughes TalonHughes - 23 days ago 6
AngularJS Question

Use angular and bootstrap to switch image behind a form

I am attempting to put a background image on a form and change the image by clicking other images in a list. I was able to put a background image in using CSS, but then I can't figure out how to implement my angular. So I put it in an image tag like I had it previously before implementing my form.

My code snippets are below and any pointers would be appreciated!



app.controller('letterCreateCtrl', function($scope, $state){

$scope.current = 'scLetterHead';

});

#responsiveForm{
background-size: cover;
background-size: 100% 100%;
min-height: 650px;
padding: 80px;
padding-top: 120px;
}

<div id="letterForm">
<section id="contact class" class="container content-section text-center">
<div class="col-md-3">
<img class="img-responsive" src="img/scLetterHead.jpg" ng-click="current='scLetterHead'" />
<img class="img-responsive" src="img/scLetterHead2.jpg" ng-click="current='scLetterHead2'" />
</div>
<div class="col-md-3">
<img class="img-responsive" src="img/scLetterHead3.jpg" ng-click="current='scLetterHead3'"/>
<img class="img-responsive" src="img/scLetterHead4.jpg" ng-click="current='scLetterHead4'"/>
</div>
<div class="col-md-6">
<form id="responsiveForm" action="">
<img class="img-responsive" ng-src="img/{{current}}.jpg" />
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" name="name"/>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="text" class="form-control" id="email" name="email"/>
</div>
<div class="form-group">
<label for="occasion">Occasion:</label>
<input type="text" class="form-control" id="occasion" name="occasion"/>
</div>
<div class="form-group">
<input type="submit" name="submit" class="form-control btn btn-primary" value="go"/>
</div>

</div>
</form>
</div>
<div class="col-md-3"></div>
</div>
</div>
</section>
</div>




Answer

I had to wrap a around my form and give it a class with a z index attribute of 10. After that I was able to position the form on top of the image.