why input field not above the background image?

Question!

I am trying to make simple single page application in which a header ,footer and contend(having background image ) input field .When I added input field it cut background image .I need that input field come above the background image ..can you please tell me where I am doing wrong mean how to add input field above background image http://codepen.io/anon/pen/pvYdNM

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Ionic List Directive</title>

    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  </head>

  <body >
           <ion-view>
        <ion-header-bar class=" bar bar-positive ">
            <h1 class="title">Title!</h1>
        </ion-header-bar>
        <ion-content class="bg" style="position:absolute; left: 0; right: 0; top: 43px; bottom: 43px;">
            <label class="item item-input">
                <span class="input-label">Username</span>
                <input type="text">
            </label>
        </ion-content>
        <ion-footer-bar class=" bar bar-footer bar-positive" style="position:fixed!important">
            <h1 class="title">Fotter!</h1>
        </ion-footer-bar>
    </ion-view>



  </body>
</html> 


Answers

Your input field is above the background image you just can't "see" it because there are no borders to the input field. This leaves you with a pure white input field on a white background.

Add this to your CSS to see the outlines of the input field:

input{border:1px solid #000 !important;}

Edit: The original question wasn't clear to me. OP clarified that the issue was that the white background of the input fields were covering the background image. Converting the background to transparent will resolve the issue: .item{background-color:transparent !important;}

Live example:

.item{background-color:transparent !important;}
input{border:1px solid #000 !important;}
.bar {
        position: relative!important
    }
    .bg {
        border: 1px solid red;
        background: url('https://d262ilb51hltx0.cloudfront.net/max/800/1*AJALCafqXhfLMG7iF7Ho0A.jpeg')!important;
        background-color: red!important;
        background-repeat: no-repeat!important;
        background-position: center!important;
        background-size: cover!important;
        
    }


This video can help you solving your question :)
By: admin