1 reply [Last post]
gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 4 years 45 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

if i have the following CSS

.device {
	visibility: visible;
    background-image: url(<a href="http://o.aolcdn.com/os/aol/aol-alpha/pip-website/img/iPhone.png" rel="nofollow">http://o.aolcdn.com/os/aol/aol-alpha/pip-website/img/iPhone.png</a>);
}
 
.device {
	-webkit-background-size: 100% 100%;
	background-size: 100%;
	height: 574px;
	width: 304px;
	visibility: hidden;
	position: fixed;
	left: 50%;
	top: 50%;
	margin-top: -20px;
	-webkit-transform: translate3d(-50%,-50%,0);
	-moz-transform: translate3d(-50%,-50%,0);
	transform: translate3d(-50%,-50%,0);
}
 
.mask {
	border: 1px solid hsl(0, 0%, 0%);
	position: absolute;
	top: 60px;
	left: 36px;
	height: 417px;
	width: 236px;
	background: hsl(0, 0%, 95%);
	overflow: hidden;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
 
.service-bar {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	background: url(<a href="http://o.aolcdn.com/os/aol/aol-alpha/pip-website/img/service-bar.png" rel="nofollow">http://o.aolcdn.com/os/aol/aol-alpha/pip-website/img/service-bar.png</a>) 0 0/100%;
	height: 15px;
	-webkit-background-size: 100% 100%;
	z-index: 1;
}

and the following HTML ::

 <div class="device">
        	<div class="mask">
        		<div class="service-bar"></div>
	        		<div class="screen skrollable skrollable-between" data-0="transform:translate3d(0,-200%,0)" data-50p="transform:translate3d(0,-200%,0)" data-75p="transform:translate3d(0,-100%,0)" data-150p="transform:translate3d(0,-100%,0)" data-175p="transform:translate3d(0,0%,0)" style="-webkit-transform: translate3d(0px, -200%, 0px); transform: translate3d(0px, -200%, 0px);">
		        		<section class="panel"></section>
		        		<section class="panel"></section>
		        		<section class="panel"></section>
	    			</div>
			</div>
		</div>

the background for the

won't display , why ?? , the problem seems to be because i have declared my css as follows :

.device {
	visibility: visible;
    background-image: url(<a href="http://o.aolcdn.com/os/aol/aol-alpha/pip-website/img/iPhone.png" rel="nofollow">http://o.aolcdn.com/os/aol/aol-alpha/pip-website/img/iPhone.png</a>);
}
 
.device {
	-webkit-background-size: 100% 100%;
	background-size: 100%;
	height: 574px;
	width: 304px;
	visibility: hidden;
	position: fixed;
	left: 50%;
	top: 50%;
	margin-top: -20px;
	-webkit-transform: translate3d(-50%,-50%,0);
	-moz-transform: translate3d(-50%,-50%,0);
	transform: translate3d(-50%,-50%,0);
}

even though in the 2nd .device class i am not overriding the background the background still does't appear , why ?? but if i inverse the order of the .device class the background displays just fine. why so ??

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 days 6 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi gautamz07, Looks like the

Hi gautamz07,
Looks like the visibility: hidden; would be the problem.