Member Avatar for Erek4

Hey all,

I am a newbie to this forum and web-design and hope this has not been asked a hundred times.

I have created a content box in Photoshop CS2. I have made it a transparent png. I am curious to see if I can add text to it in CSS or do I need to do it in photoshop? Also, I would like to add images to this content box, is this possible?

I added this as an image as an attachment.

Finally, should I add this as an image in my html file or css?

Best,
Erek

box.png 6.22 KB
  • 4 Contributors
  • 10 Replies
  • 185 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by MJ Pieterse

Dani AI

Generated

Short, practical approach for this Photoshop-made box: keep the visual (the PNG) as a decorative layer and put real text and images in HTML/CSS. That preserves accessibility, makes content editable for different screen sizes, and is much easier to maintain than baking every word into the image. and were on the right track with the background/rounded-corner ideas — use those concepts but keep content semantic.

A simple pattern you can apply:

<div class="box">
  <h2>Title</h2>
  <p>Body text stays in HTML for accessibility and SEO.</p>
  <img src="photo.jpg" alt="illustration" class="inline-img">
</div>
.box {
  width: 700px;
  padding: 40px;           /* match the transparent "window" in your PNG */
  background: url("overlay.png") center/contain no-repeat;
  box-sizing: border-box;
}
.inline-img { max-width:100%; display:block; margin-top:1em; }

Notes and troubleshooting

  • Match the container padding to the transparent area of your PNG so text appears inside the cutout. Adjust background-size (contain/cover or explicit %) for responsive scaling.
  • If the visual is simple (rounded box, shadow, gradient), recreate it with CSS or SVG instead of an image — smaller, sharper, and easier to scale.
  • For high-DPI (retina) displays, export the PNG at 2x and scale it down in CSS to keep edges crisp.
  • Keep decorative images empty for screen readers (alt="") and keep all meaningful content as real HTML. Use web fonts (or @font-face) if the look requires specific typography instead of rendering text into an image.

This gives you editable, accessible text inside the Photoshop frame while keeping the original artwork as a flexible overlay. , that workflow will let you add inline images and update copy without reopening Photoshop; , , and already pointed in helpful directions — this ties those ideas into a practical, modern implementation.

Recommended Answers

All 10 Replies

Member Avatar for rockbd

addin Png in html causes white background sometimes. and also png takes more space then all other images. if u want to add some content over an image @ html. use the image as background.
i used 3 gif images as my background on my site. i could use png also. but for keep speed flow most of the designers use gif and jpeg.

Member Avatar for Erek4

Rockbd,

Thanks for your reply.

Erek

Member Avatar for macneato

Hi Erek4,

First things first. Read up on the link below, it will explain how to create rounded corners (too lazy to type it out for you)
Click here.

You can use PNG or Gif, only older browsers don't support png transparency, but if you really wanted to use them, you could use a pngFIX. but GIFs usually do the trick. Take a look at yet another link below to get an idea of what file formats do what:

Member Avatar for Erek4

Thanks for the input. I was curious, can I save the image as a gif in photoshop. In photoshop, I thought I was limited to what format I could save an image to. Also, when I added text to the image I was unable to save it in any format except: .psd

I will check this out again.

Thanks for the links and the comparison chart.

Best,

Erek

Member Avatar for macneato

Photoshop allows you to save as specific web formats. Not sure what version you are using, but to save for web do the following:

FILE > Save for web and devices
or alternatively use the shortcut;
ctrl+alt+shift+s

Member Avatar for rockbd

WELLL!! macneato. i thinkg he do know how to save!!! [no offence] :)

Member Avatar for macneato

In photoshop, I thought I was limited to what format I could save an image to. Also, when I added text to the image I was unable to save it in any format except: .psd

Read the post probably... then re-think what you just said to me.

Member Avatar for rockbd

sry!! i didnt saw that!! :(

Member Avatar for Erek4

Macneato,

Thanks, I am new to Photoshop (CS2) and wanted to make sure I was doing it right.

Erek

Member Avatar for MJ Pieterse

make sure that when you want to save your image in PS as a gif, that your bit rate is set to 8 and rgb. rastarize all your layers before saving, that would prevent the text from changing in some instances. you can put your image in a pop up div in dreamweaver that works wonders.

p.s. when you do save an image for .gif, just make sure that your background is transparent and your checkbox for transparent is selected.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.