Hey there, I need some assistance resolving an issue with a header background image on iPad3. The problem is that the image is not displaying correctly on iPad3 browsers, even though it works fine on desktop browsers. Below you can find my CSS and HTML code:
fiddle link http://jsfiddle.net/jvandhana/CL6Ru/
<div id="header">
<div class="headerhead">
<div class="headerdetail">
My Task
</div>
</div>
</div>
#header {
background: url("../images/bgheadgrey.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
color: #FFFFFF;
}
.headerhead {
height: 60px;
line-height: 60px;
text-align: center;
margin: 0 auto;
width: 50%;
background: url("../images/bgtitle_large1.png") no-repeat scroll center 0 rgba(0, 0, 0, 0);
font-size: 2em;
}
Media Query for iPad3 /*iPad 3 & 4 Media Queries */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2) {
#header {
position: relative;
z-index: 0;
}
.headerhead {
height: 60px;
width: 600px;
position: relative;
z-index: 999;
}
}