Positioning Images

**topmonkey** · May 5, 2007, 08:39

Ok, on a very basic level I'm trying to have an image in the top left corner and one in the bottom right, whatever the screen res, with content in the middle.
This is my code extremely simplified:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="style2.css" rel="stylesheet" type="text/css">

<style type="text/css">
body {
background: url('bg2.jpg') gray;
padding:0;
margin:0;
}

#grasstop {
position:absolute;
}

#grassbottom {
position:absolute;
bottom:0px;
right:0px;
}

#content {
position:relative;
height:800px;
border: 2px solid black;
background:white;
top:35px;
margin-left:28&#37;;
margin-right:28%;
margin-bottom:12%;
padding:50px;
}
</style>

</head>

<body>
<img id="grasstop" src="grass.gif">
<img id="grassbottom" src="grass2.gif">
<div id="content">Lots of content here,Lots of content here,Lots of content here,Lots of content here,
Lots of content here,Lots of content here,Lots of content here,Lots of content here,Lots of content here,
Lots of content here,Lots of content here,Lots of content here,Lots of content here,Lots of content here,
Lots of content here,Lots of content here,Lots of content here,Lots of content here,Lots of content here,
</div>
		
</body>
</html>

Why can I get the right-hand 'grass' image to sit on the bottom? And is there a simple way of doing this?

**LJK** · May 5, 2007, 20:21

Hi -
If it's to go in the bottom-right of #content, why not just make it a bkgnd. image?

Code:

div#content{
background:transparent url(imgs/grass.gif) no-repeat 100&#37; 100%;}

Where % are distance from the left and top of the div's boundries.

Good luck,
El

**topmonkey** · May 6, 2007, 06:16

Originally Posted by LJK

Hi -
If it's to go in the bottom-right of #content, why not just make it a bkgnd. image?

Code:

div#content{
background:transparent url(imgs/grass.gif) no-repeat 100% 100%;}

Where % are distance from the left and top of the div's boundries.

Good luck,
El

Thanks. Couldn't get that working to start with, that was until I tried applying a fixed with to the body - works in all resolutions from 800x600 upwards.

The SitePoint Forums have moved.

User Tag List

Thread: Positioning Images

Thread Tools

Display

Positioning Images

Bookmarks

Bookmarks

Posting Permissions