PDA

Click to See Complete Forum and Search --> : image positioning help

dimotennaclocke
12-19-2005, 03:21 AM
im working on a web site. there is a frame at the top for the menu. on the main page below i need to have a picture in the upper left hand corner. i need it to stay stationary when scrolling on that page because it lines up with the image on the frame above it to complete the image. I cant have it as the backround because there is a diff pic for the backround.

this is the code i used for the backround image


<style type="text/css">
<!--
body {
background-color: 808080;
background-image: url(bg.bmp);
background-repeat: yes-repeat;
background-attachment: fixed;
background-position: 0% 0%;
-->
</style>

i tried to use the above code for both pictures but that didnt work.

plz help. thx.
ofir
12-19-2005, 03:31 AM
first: you can write all this in one line:
body{ backdround: #808080 url(bg.bmp) repeat fixed 0% 0% }

second: you can make a div and give it the 2nd pic as background.

a link to your site would help us to help you.
dimotennaclocke
12-19-2005, 04:51 AM
its not currently uploaded anywhere.

could you go more in depth on "making a div"

thx.
dimotennaclocke
12-19-2005, 05:27 AM
http://www.geocities.com/wcninja/a/frames.html


on the lower page, the image that moves when you scroll is what i need to stay in place.
ofir
12-19-2005, 06:51 AM
if IE would be working properly writing "position: fixed" would do it.
(try it in Firefox to see result)

otherwise try this : http://www.cssplay.co.uk/layouts/fixed.html
ShrineDesigns
12-19-2005, 07:41 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
html {
overflow: hidden;
}
html,
body {
height: 100%;
}
body {
margin: 0%;
padding: 0%;
background: #FFF url("http://img514.imageshack.us/img514/6586/bg8yi.jpg") 0% 0% repeat;
color: #000;
}
div {
display: block;
}
img {
display: run-in;
display: inline-block;
line-height: 100%;
}
#header {
background: url("http://img514.imageshack.us/img514/1786/topbg0az.jpg") 0% 0% repeat-x;
}
#float,
#page {
display: block;
position: absolute;
top: 101px;
left: 0px;
}
#page {
width: 100%;
height: 100%;
overflow: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#main {
margin: 3em .5em 1em;
}
-->
</style>
<script type="text/javascript" defer>
<!--
function pageHeight()
{
var dom = document;
var y = document.body.clientHeight - 101;
document.getElementById('page').style.height = y + 'px';
}
//-->
</script>
</head>
<body onload="pageHeight()" onresize="pageHeight()">
<div id="header"><img src="http://img514.imageshack.us/img514/2584/upleftcorner28qg.jpg" alt=""></div>
<img id="float" src="http://img514.imageshack.us/img514/4919/upleftcornermain2gs.gif" alt="">
<div id="page">
<div id="main">Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
Lorem ipsum dolor sit amet.</div>
</div>
</body>
</html>
lil_killer_duck
07-03-2006, 04:29 AM
Actually it is pretty simple what you are trying to do.

<img src="url"style="position:absolute;top:#px;left:#px;z-index:2;">

Just change the url and #s and it should be fine, assuming the image you are trying to position has trancparency. If not... it might not look right. Good luck, anyway!