Text on Pictures

master maste

New Member
Reaction score
32
I've been playing around with creating websites in photoshop. I was wondering how you would go about putting text over a picture.

I have a boxed area I have made in photoshop and I was wondering if there is anyway to put an input box inside or ontop of that image?
 

enouwee

Non ex transverso sed deorsum
Reaction score
239
Post a picture of the layout you're trying to achieve. It might be easier to understand than your description.
 

master maste

New Member
Reaction score
32
Sure thing, here we go.

edit: errr I guess its obvious this is only one element of the page (haven't finished the rest yet) it will be sliced up, but slices haven't been determined if that means anything. And the input box needs to be on the black area.
 

Rad

...
Reaction score
228
Make a div with a predefined size, put your control in the div, set the background image to that black image you made. Position the input using padding.

You may find the size getting distorted, if this happens then subtract the padding from the width/height like so:
Width - (Pad_Left + Pad_Right)
Height - (Pad_Top + Pad_Bottom)

PHP:
<div id="MyButton"> <input ...> </div>

<style type="text/css">
#MyButton {
background-image: url('../image.gif') no-repeat center;
width: 200px;
height: 100px;
padding: top, right, bottom, left; 
}
</style>
 

master maste

New Member
Reaction score
32
I thought you could only put one image in the background... and since they are being sliced then there are more than one background image...

just trying to figure out what you suggested up there. Trying that code out.
 

Rad

...
Reaction score
228
I never noticed that you attached an image before, I guess it didn't load last time.

I thought you were just putting text over a fixed image. If you want it "fluid" (i think is the term), you need three images:

Left side (rounded), right side (rounded), center (straight, thin).

You can leave it how it is right now, as combined left and right side of the background. You still need the center part though (just take 1 or 2 pixels of the center).

Heres an example that hopefully will make sense to you. The embedded div's might confuse you, but its the standard way of doing this type of thing.
 

Attachments

  • imgbg.zip
    4.8 KB · Views: 113

ertaboy356b

Old School Gamer
Reaction score
86
You can use positioning using
HTML:
<div style="position:absolute;z-index:1000;top:<some number>;left:<some number>">Add Something you want here... This should overlap the image...</div>

Correct me if I'm mistaken about styles.. I haven't designed a full page for a long time..
 
General chit-chat
Help Users
  • No one is chatting at the moment.

      The Helper Discord

      Members online

      No members online now.

      Affiliates

      Hive Workshop NUON Dome World Editor Tutorials

      Network Sponsors

      Apex Steel Pipe - Buys and sells Steel Pipe.
      Top