images position in different browsers, html
Question
I want to put an image in two colours as the background, and then 3 images above that background. This is the code that I made:
<div style="position: fixed; z-index:100" height="5px"><img src="http://i44.tinypic.com/257g1nl.jpg" border="0" style="position: fixed; width:100%" ></div>
<div style="position: fixed; z-index:500"><a href="http://www.hopesheffield.org/hope"><img src="http://i40.tinypic.com/70b4wk.jpg" width="435px" border="0" style="position:fixed; left:1050px;top:120px" ></a></div>
<div style="position: fixed; z-index:500"><img src="http://i42.tinypic.com/11k84mu.jpg" border="0" width:"435px" style="position:fixed; left:550px;top:120px"> </div>
<div style="position: fixed; z-index:500"><img src="http://i43.tinypic.com/2sax8nt.png" border="0" width:"535px" style="position:fixed; left:650px; top:550px"></div>
<head>{{ head_content }}
<style type="text/css">
html {
overflow:hidden;
}
</style>
</head>
Also, I don't want scroll. At the momment, it is working on internet explorer, but when I open the page from Safari, the images above the background are shifted. Any idea?
This is the webpage: http://www.hopesheffield.org/
Thanks!!
2 answers
solution1
1 2013-12-03 10:58:39
Try positioning with relative values for the 'left' property instead of number of pixels.
As in : left:25%; and left:60%; for your images.
For a more fluid experience on mobile devices as well try not to set a fixed size for images, but rather apply the same relative values in the css not html attributes.
Also you might have to think about using css media queries if your problem persists.
solution2
0 2013-12-03 11:11:29
change your HTML like this:
<div class="cover">
<img src="http://i44.tinypic.com/257g1nl.jpg"/>
</div>
<div class="right">
<a href="http://www.hopesheffield.org/hope">
<img src="http://i40.tinypic.com/70b4wk.jpg" width="435px"/></a>
</div>
<div class="left">
<img src="http://i42.tinypic.com/11k84mu.jpg" />
</div>
<div class="bottom">
<img src="http://i43.tinypic.com/2sax8nt.png" />
</div>
and here is the CSS:
.cover{
position:fixed;
z-index:1;
top:0;
left:0;
}
.right{
position:fixed;
z-index:2;
right:25%;
margin-right:-217px;
top:120px;
}
.left{
position:fixed;
z-index:2;
left:25%;
margin-left:-194px;
top:120px;
}
.bottom{
position:fixed;
bottom:0;
left:50%;
margin-left:-382px;
z-index:2;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.