Text over an image

[casho]

Hi, I want to put text over an image but I don't know all I can find how to do it with tables.

[1840dsgn]

say it isn in a paragraph:

xhmtl

Code: Select all

 
<p class="textOverImage">This text will go over the image</p>

css

Code: Select all

 
.textOverImage {
   background: url(pathtoyourimage) top left no-repeat;
   width: imagewidth;
   height: imageheight;
}

OK...we assign the class textOverImage to the paragraph and then style the class in our css. Obv you can replace this class anme with whatever you like.

ok:

Code: Select all

 
background: url(pathtoyourimage) top left no-repeat;

Replace pathtoyourimage - with the path to your image!
if it is a reepeating image then you can use repeat (to repeat both directions), repeat-x (to repeat horizontally only) or repeat-y (to repeat vertically only).

At the moment it is set to no-repeat, whcih means it will not repeat.

Code: Select all

 
width: imagewidth;
height: imageheight;

If your image needs ot display as a certain size then you can use width and height to specify this. If you do not specify this then you can delete these two attributes and your image wiull be as big as the paragraph text.

To add padding around the text you can use

Code: Select all

 
padding: 10px;

Where 10px can be your value and c an be in %$ or ems or px.

If you want different padding top left bottom and right you can use the followjing shorthand:

padding: topandbottom leftandright; (eg padding: 10px 5px; would add 10px to top and bottom and 5pxx to the sides)

padding top right bottom left; (eg padding: 2px 3px 4px 5px; would add 2px to top, 3px to right, 4px to bottom and 5px to left)

Hope that helps

[karinne]

hmmm ... put the image as a background?!?

[casho]

Can you have 2 background images.

[1840dsgn]

Only if you have two different elements. you can't have two bg images for one element.

Maybe tell us whgat you want to achieve and give us a link and we could help?

[casho]

There seems to be a problem I want multiple paragraphs to be selected and put over 1 image but you code seems to make a new image for ever bit of text.

[casho]

Well I want to make it look like this .

[1840dsgn]

Ok...

in that case put a div round that content.

So you would ahve this:

Code: Select all

 
<div class="textOverImage">  //or whatever you called it
 
    <p>made the navigation...etc</p>
 
    <p> added a heade rto eahc...etc</p>
 
     all the content you want with a bg image.
 
</div>

[karinne]

Well ... that's because the code he gave you was just an example. If you would have given us a bit more to go on, we would have stirred you in a better direction.


You'll need 3 background for this to work. One with the top rounded corners that you can apply to the News heading, one with the side to apply to the middle/content and one for the footer.

[1840dsgn]

Well ... that's because the code he gave you was just an example

yea, to be honest, you'll never learn if you don't experiment yourself. thats pretty much how I've learnt everything by trying idfferent things and when one works I can then apply it to everything else.

Sure post up here if your really stuck or for a bit of direction. but that code I gave you polus reading some tutorials on background images and searching google should have been enough for you to go off an experiement.