No replies
Ranju
Ranju's picture
Offline
newbie
Last seen: 9 years 4 days ago
Timezone: GMT+1
Joined: 2013-01-24
Posts: 3
Points: 5

Hello Everyone

My problem is when I try to set the height of the container div with a background image to anything except a pixel value the background image disappears .I am trying to make a responsive website design.I have tried all of the following solutions without any success.

1)setting height=auto,width=auto,max-width=20%;
2)setting height=30%,width=20%;
3)setting parent div's overflow:hidden
4)using clearfloat with the parent div

Image gets properly displayed if I set height=100px;

I cannot set background-size=100% for the image as I am referring to one of the multiple images in one image file set through background-position property.problem is to set image as background to two li under class using .risk-status-circle li and background-position properties.

My code is as follows

HTML
========

<div class="overlay"></div>
 
 
<div class="popupWrapper risk-assesment-confirm" ng-show="showRiskConfirmPopup">
  <div class="popupHeading clearFloat">
    <h2>risk assesment - confirmation</h2>
    <a ng-click="closePopup()" class="closePopupBtn">Close</a> </div>
  <div class="popupContent">
    <h5 class="question">As per our understanding you fall in the following risk, 
would you like to change this?</h5>
    <div class="risk-status-circle">
    <ul>
      <li class="low-risk {{isActive('low')}}" ng-click="setRiskProfile('low', this)"></li>
      <li class="high-risk {{isActive('high')}}" ng-click="setRiskProfile('high', this)"></li>
      </ul>
    </div>
    <div class="risk-submit-btn">
    <div class="risk-submit-inner">
      <input type="submit" value="back" ng-click="closeRiskConfirmPopup()" class="blueBotton" />
      <input type="submit" value="submit" ng-click="closePopup()" class="orangeButton" />
      </div>
    </div>
  </div>
</div>

CSS
================

.risk-assesment-confirm {
	width: 80%;
left: 6%;
top: 9%;
}
.risk-assesment-confirm .popupContent h5.question {
	font-size: 120%;
color: #000;
width: 70%;
text-align: center;
margin: 0% 0%;
}
.risk-assesment-confirm .popupContent .risk-status-circle {
	width: auto;
margin: 4% 13% 2%;
}
.risk-assesment-confirm .popupContent .risk-status-circle li {
	width:26%;
        height:auto;
	/*height:225px;       */
	background:url(../images/risk-assesment-status.png) 0 0 no-repeat;
	display:inline-block;
	margin-right:1%;
}
 
.risk-assesment-confirm .popupContent .risk-status-circle li:after{
display:block;
content:" ";
clear:both;
}
.risk-assesment-confirm .popupContent .risk-status-circle .low-risk {
	background-position:8% 3%;
 
}
.risk-assesment-confirm .popupContent .risk-status-circle .medium-risk {
	background-position:8% 49%;
 
 
}
.risk-assesment-confirm .popupContent .risk-status-circle .high-risk {
	background-position:8% 96%;
 
}
.risk-assesment-confirm .popupContent .risk-submit-btn {
	background:url(../images/risk-bottom-shadow.png) center -26px no-repeat;
	width: 100%;
        padding-top: 0%;
        margin-bottom: 1%;
}
.risk-assesment-confirm .popupContent .risk-status-circle .active {
	background-position-x: 92%;       
}
.risk-assesment-confirm .popupContent .risk-submit-btn input {
	width: 33% !important;
        margin-right: 2%;
        margin-top: 6%;
}

Please help as I am stuck with this problem from many days

Thanks and Regards
Ranju