transparent backgrounds in Photoshop 7

help needed

[Gabriele]

Hi all!
I'm tryng to make a background transparent using Photoshop 7, but I can't do it as I would. Can you help me to do this with a short guideline? thanx you all! :)

[zackattack]

Hi Gabriele

transparent backgrounds can be easily created if you are saving an image as a .gif or.png file.

What is the image you are trying to save?
What is the image intended for - for a website I assume?

Can you give a little more desctiption, I may be able to help

ZA

[Gabriele]

Thanx for your answer! :)
I wish to create a background for a <div> using png or gif,
so that I can easily write text over it, but my knowledge of Photoshop is very weak. can you help me? thanx again! :)

[zackattack]

Gabriele

right, if you want to make a background for a <div> and you need transparency you will need to use a .gif - currently gifs with transparency are supported much better than .png across browsers.

There are a few other questions, can you describe a little more what you are trying to do, what the image is and why it needs to be transparent, as there are several ways to approach this and if you give me a fuller description hopefully this can get you your answer quicker...

ZA

[Gabriele]

The image is a photo of a landscape in grey (250x250 px), and I wish to put it in the top-left corner of the div.

[Gabriele]

ah, it's a jpg image. it should stay fixed while text moves
over it.

[zackattack]

HI

It doesnt sound like the image needs to be transparent, if I understand you correctly, you want the image to show behind the text, so the text flows over the image.

If I am right, then you dont need Photoshop you need to use CSS on the div to apply the background. Put this into your HTML head

<style type="text/css">
#div {
background: url(imagename.jpg) top left no-repeat;
}
</style>

NOTE: If you are using an external style sheet, then put this into there.
I have called it #div but you need to give it an unique name like #landscape

You can then type text into the div area and the image will always remain in the top left of the div

If this is not what you wanted let me know

ZA

[Don_Hoagie]

I imagine that when you refer to the image being "transparent", you're actually talking about its opacity, or level of transparency.

The difference being that in a GIF or PNG file, you can have areas that are totally transparent, while other areas are showing fully... JPG's have no transparency support; however if you have an image, such as a landscape, and you want it behind a text div, you'll probably want to tone down the opacity (visibility) of the image so that the text is easy to read. Is that what you're looking for?

This is not a problem, as long as the div on your webpage is going to have a backround color. That is the key.

Open your JPG in Photoshop, then create a new layer... fill that new layer with the color of your div's background, and then in the "layers" window of Photoshop, rearrange your layers so that your new layer is beneath your JPG layer (you should only be seeing the JPG at that point).

Then go to your JPG layer, and again in the "Layers" window, change the JPG layer's opacity to taste... usually for text to be easy to read over it, the opacity should be between 5 - 20%.

Then just save using "File-->Save For Web...", and save it as a JPG of whatever quality you desire.

Hope that helps... I use this effect often when I want to liven up a text div.

[Gabriele]

Thank you all, guys! :)