shifting background images

zoran · 06-14-2007, 12:23 AM

is there a way to change the placement of a background image thats placed to a cell?

Jesse Vlasveld · 06-14-2007, 12:37 AM

http://www.w3schools.com/css/css_background.asp

zoran · 06-14-2007, 02:11 AM

Quote:

Originally Posted by Jesse Vlasveld

http://www.w3schools.com/css/css_background.asp

Ok thanx for the help, but i just cant seem to be able to fit this css code into an example of tables im trying to make. Note that i want to shift a pic in the background of the first cell (gray colored), shift is as shown on the example!
Here is the code...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<div align="center">
<table width="800" height="656" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="15" rowspan="4" background="Images/side4.gif"> </td>
<td height="185" bgcolor="#CCCCCC"> </td>
<td width="15" rowspan="4" background="Images/side4a.gif"> </td>
</tr>
<tr>
<td height="30" bgcolor="#FFCC66" style="border-top: solid 1px #FFFFFF;"> </td>
</tr>
<tr>
<td height="143"> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</div>
</body>
</html>

Costin Trifan · 06-14-2007, 02:31 AM

Quote:

Images/side4.gif & Images/side4a.gif

Where can we find those images so we can actually give you some help?

zoran · 06-14-2007, 12:19 PM

Oh sorry for mixing u up on this. The side4a.gif pics are the shadows for the sides, i dont mind about those. I just want the html code for shiffting a placed image thats put inside the gray cell (the first tp cell).
Wait ill put a pic there so u can shift it for me around...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<div align="center">
<table width="800" height="656" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="15" rowspan="4" background="Images/side4.gif"> </td>
<td height="185" background="Images/main.gif" bgcolor="#CCCCCC"> </td>
<td width="15" rowspan="4" background="Images/side4a.gif"> </td>
</tr>
<tr>
<td height="30" bgcolor="#FFCC66" style="border-top: solid 1px #FFFFFF;"> </td>
</tr>
<tr>
<td height="143"> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</div>
</body>
</html>

Costin Trifan · 06-14-2007, 03:06 PM

I might be looking stupid here, but I don't understand a thing of what you're saying...

Let me tell you what I understand:

-- you have a table
-- this table has 3 cells
-- each cell has it's own background image
-- the background for the left cell (Images/side4.gif)
-- the background for the middle cell (Images/main.gif)
-- the background for the right cell (Images/side4a.gif)

Now, what I don't understand:

-- What image you want to shift, and where;

And please, be more specific this time

zoran · 06-14-2007, 10:47 PM

Ok i want to shift the container of the cell that has the "main.gif" file. Dont worry about the sides. Main.gif is a pic bigger than the size of the cell and i want to reposition it around by using pixel dimensions. Thats the only that pic i want to move around! Imagine like paning it around in the cell!!!!
Im sorry i put you into all this trouble, thanx so mutch for your intrest!

cashcannon · 06-15-2007, 12:01 AM

Errr, maybe if you divide your main image and use the overflow:hidden and margin and paddings, you could "kind of" get what you want, but it would only move once, on a click or mouseover.
A pan effect would be either a lot of javascript or flash
But maybe I misunderstood, good luck anyways

zoran · 06-15-2007, 12:17 AM

This will take longer than i thought

When i said paning i only ment it so u can understand how the pic would be placed in the cell, like you drag and drop it by paning it. I dont want any interactivity, no java script or flash, i want it solid there, to one place, but i want it there, by adjusting the pixels of width and height!

Sorry again i should never have mentioned panning

Costin Trifan · 06-15-2007, 01:55 AM

zoran, if your image's size is, lets's say, 200x100 and your cell's size is 100x50 there is no way of cutting that image off to fit in the cell as a background image.

All you can do is to play around with the background-position style attribute and see what you can do.

background-image: url('main.gif');
background-repeat: no-repeat;
background-position: [bottom] [center] [left] [right] [top] [inherit];

You can play around by mixing these values

:
background-position: bottom center;
or
background-position: left top;
....

hth

zoran · 06-15-2007, 02:53 AM

Cant i set it to shift by "y" pixels vertically and "x" pixels horizontally?

Costin Trifan · 06-15-2007, 05:40 AM

nope...

that's not yet implemented...

cashcannon · 06-15-2007, 07:19 AM

Quote:

Originally Posted by zoran

This will take longer than i thought

When i said paning i only ment it so u can understand how the pic would be placed in the cell, like you drag and drop it by paning it. I dont want any interactivity, no java script or flash, i want it solid there, to one place, but i want it there, by adjusting the pixels of width and height!

Sorry again i should never have mentioned panning

If you place an image in a div as a background with an overflow:hidden tag and thre div is smaller than the image, you could do that.

cashcannon · 06-15-2007, 07:24 AM

The image is bigger than 200/100 and you can move it aroundwith margins and paddings. But its static

Quote:

#block {
background-image:url("block.jpg");
background-position:top left;
background-repeat:no-repeat;
width:200px;
height:100px;
}

zoran · 06-15-2007, 11:00 AM

Quote:

Originally Posted by cashcannon

The image is bigger than 200/100 and you can move it aroundwith margins and paddings. But its static

can u please put your example in my code, cause i have no idea where to insert it and how!! its the gray cell i want to place my picture in!!!

cashcannon · 06-18-2007, 12:24 AM

Link it to your background image, and adjust the width and height to what you want, and call the table id="block"