PDA

Click to See Complete Forum and Search --> : image & background of webpage ???

Asch
12-04-2003, 04:38 PM
Hi, i have a problem with putting an image on a page which has a special background...

I want the background of the page to go until the borders from the image look @ it HERE (http://www.aschwebdesign.ch/~so) ...

I tried to put the same background on the image ....but the lignes never maches...does somebody knows how to do it ?


thx for your help.....


:D
Daria
12-05-2003, 10:33 AM
a) see if it matches now
b) the usual approach (if you want to stick with tables)would be to take a small one-square image and tile it throughout the page background, and then insert other clipped images into the cells.
c) I suggest to make this layout with CSS.
Asch
12-06-2003, 06:36 AM
hi, thx ..but it doenst matches

- What did you change on the source of the page ?....

so if i have understood (my english is limited :O) )....you mean i have to divide the images in small squares...and stick them all together...I don t hink it will change something ?....
Daria
12-08-2003, 09:15 AM
Uhmm I don't remember now what I've changed... Something about <td>s not sitting within a <tr> properly... or something like that. Sorry, it's been a few days now and my memory kind of faded...

Re: squares - download attached and see...
I'm going to post couple more times so you get all the files.

here is the html file source:

---------------------------------------------------

<html>
<head>
<title>So?... Cosmetics - PLEASE, CHOOSE A COUNTRY</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body background="square.jpg" leftmargin="0" topmargin="0">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td align="right"><img src="top_left.gif"></td>
<td width="380">
<img src="top_center.gif">
<p align="center">Welcome on the So...? Website.<br>
Please select a country:</p>
</td>
<td align="left"><img src="top_right.gif"></td>
</tr>
</table>
</body>
</html>
Daria
12-08-2003, 09:17 AM
another image for that file

(shoot, forgot to attach the image)
Daria
12-08-2003, 09:19 AM
attachment 2
Daria
12-08-2003, 09:20 AM
attachment 3 ( I should've zipped them... too late!)
Daria
12-08-2003, 09:21 AM
the last one:
Daria
12-08-2003, 09:28 AM
Sorry, everyone, for "flooding" when I could've zipped the files... Will do next time.

Now, you can also make those images as a background, remembering to put them within the <td> tags. Here's the code:

<html>
<head>
<title>So?... Cosmetics - PLEASE, CHOOSE A COUNTRY</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body background="square.jpg" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="500">
<tr valign="top">
<td align="right" width="200" background="top_left.gif" rowspan="2">&nbsp;</td>
<td width="380" height="140"><img src="top_center.gif"></td>
<td align="left" background="top_right.gif" rowspan="2">&nbsp;</td>
</tr>
<tr valign="top">
<td width="380" align="center">Welcome on the So...? Website.<br>
Please select a country:</td>
</tr>
</table>
</body>
</html>
Asch
12-08-2003, 01:35 PM
Daria, really really thank you....it s exactly what I needed...absolutly great :D :D :D :D ...how can I help you ...:O) lol ..

know i m intersted in how you did it ??...did you erase the bakground....in transparency...and save it under a .gif ??? and this does the transparency?? really cool if it does..:O)...

cheers
Daria
12-09-2003, 02:09 PM
:)
Well, I just erased it by hand here since I was at the location where I don't have the photoshop, but yes, that is the idea.

In Photoshop (hopefully you have one), open a new file with transparent background (size of your image), than cut and paste your image as a new layer for that new document.

Using the lasso tool and setting the sensitivity levels you can lasso and cut certain areas you don't want to be visible out - and once you do those areas become transparent (since it's layered over transparent area; if you layer it over the colored background, it will reveal that background).

Then save it as a *.gif file. It's always better to choose "save for web" option (to optimize your image for the Web), select GIF, click the box for saving transparency, and adjust the number of colors to the lowest number that satisfies the quality of the image.

Now, remember, it is always better to have a small image for a background (just tile it, as we did in this example), - it requires less time to load. The smaller, the better :)

"shop around" for a good photoshop tutorial. I liked www.good-tutorials.com, but their page is not responding today (don't know why). There is some good stuff on Gurus Network Photoshop Tutorials (http://www.gurusnetwork.com/tutorials/photoshop/index.html) - see exaples, play around :))
Asch
12-10-2003, 04:09 AM
yeah...works great really cool thanks again....

but the thing for dividing images --- i don t think it will change something in my case...cause i preload images so that they appear on all the same time....

cheers

:D :D :D