Aligning css position in div not working

Question

I am trying to positioning two input box into a div and set the background the image of the div. my div is the following:

<div id="Chart0">
<span class="x_axis" >
<label>
<b>X-Axis:</b>
</label>
<input type="text" value="@VAL([Test1Q1].[Site Name])">
</span>
<span class="y_axis" >
<label>
<b>Y-Axis:</b>
</label>
<input type="text" value="@VAL([Test1Q1].[Bandwidth])">
</span>
</div>

My main problem is the height and width of the div can be changed by javascript and when div height and width changed the input boxes have to be fixed into their position.

x axis need to set in lower left and y axis in upper right like the figure. I have tried with the following css

.x_axis{
 float:left;
 margin-top:170px;
}
.y_axis{
  float:right;
}

and I also need to set the background image in the middle of the div with no repeat if the div height width get changed it have to be fixed in middle position.

div{

     background-image:url(../images/pies.jpg);
     background-size: 100%;

}

But the problem is the image repeated when i change the height of div and input box position also changed. I could not not figure out what should i do?

Answer 1

You could set a position:relative to the parent div and apply position: absolute to the inner spans:

#Chart0 {
    position: relative;
    background-image: url('path/to/your/image.png'); 
    background-repeat: no-repeat; 
    background-size: cover;
    background-position: 50% 50%;
}

.x_axis {
   position: absolute;
   left: 0;
   bottom: 0;
}

.y_axis {
   position: absolute;
   right: 0;
   top: 0;
}

For the background image, check out the background-size property. You can use background-size: cover

WORKING DEMO

 #Chart0 { width: 70%; height: 400px; position: relative; border: 1px solid #333; background-image: url('http://www.techinsights.com/uploadedImages/Public_Website/Content_-_Primary/Teardowncom/Sample_Reports/sample-icon.png'); background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; } .x_axis { position: absolute; left: 0; bottom: 0; } .y_axis { position: absolute; right: 0; top: 0; } 

 <div id="Chart0"> <span class="x_axis" > <label> <b>X-Axis:</b> </label> <input type="text" value="@VAL([Test1Q1].[Site Name])"> </span> <span class="y_axis" > <label> <b>Y-Axis:</b> </label> <input type="text" value="@VAL([Test1Q1].[Bandwidth])"> </span> </div> 

Answer 2

You need to do some changes. First of all, change your spans to divs (not quite sure if this is neccessary). Then give your Chart0 a "position: relative" and your divs x_axis and y_axis position absolute. Now you can move them with left: 0 and bottom: 0 to the bottom (x_axis).

and for your background: use "background-repeat: none" to not repeat it. and "background-position: 50% 50%" for a mid-align.