CODEWITHSUNDEEP
csshtmlimagebackground
Natiya
Natiya

Reputation: 473

images position in different browsers, html

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!!

Upvotes: 0

Views: 876

Answers (2)

Bobby5193
Bobby5193

Reputation: 1625

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.

Upvotes: 1

Mohsen Safari
Mohsen Safari

Reputation: 6795

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;
}

DEMO

Upvotes: 0

Related Questions