Is there a way with css3 to force an image to take all the room of an "iphone/ipad" page both in landscape and portrait.
And in addition to be sure that the sound reader of the <audio> tag is placed above?
I tried to use the element zindex, but it doesn't work and always display sound reader on top of the image and not above.
HTML:
<body>
<div class="wrapper" align="center">
<a id="pic1"/><audio class="centerSound" src="sons/1.m4a" controls="true" autoplay="false"/>
<img class="centerImage" src="images/big1.jpg" alt="Le Petit Chaperon Rouge" title="Le Petit Chaperon Rouge"/>
</div>
</body>
and CSS:
.centerSound {
height: 100%;
z-index:1;
position:absolute;
}
.wrapper {
clear:both;
padding-bottom: 5%;
position:relative;
padding-top: 1em;
page-break-before:always;
}
.centerImage {
height: 100%;
z-index:-1;
position:absolute;
}
In addition to my "on top"/"above" problem, I also see that the image is dsiplayed on 2 "pages" in landscape mode (90% on page 1 and 10% on page 2)
Sorry for those silly questions but we are experimenting to find the rendering requested.
I hope the 2 images attached will explain a litlle more my questions
