• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 362
  • Last Modified:

centering text in the middle of an image using css

want to center text in the middle of an image.

here is an example using an image which demonstrates what i would like to appear http://jongalli.rar.gi/update/siteimages/test.jpg in final browser view.

however i want to separate the text from the image, allowing me to control the font  using CSS, and not have to edit my images everytime.

i know this can be done using php GD whereby i can draw the text on an image, but am sure there is a much easier and less complicated way to achieve this effect using css.

i know you can apply a css background-image to a div element e.g:

<html>
<body>
<style>
div
{
 background-image: url('http://jongalli.rar.gi/update/siteimages/photography_r02.jpg');
 background-repeat:no-repeat;
 overflow:hidden;
 width:150px;
 height:50px;
 color:#ff0000;
 font-weight:bold;
}
</style>
<div>
home
</div>
</body>
</html>

but the images being used are part of a navigation, meaning that this static rule doesnt apply to me.

any ideas?
0
jongalli
Asked:
jongalli
  • 4
  • 3
1 Solution
 
WilliamFrantzCommented:
<html>
<body>
<style>
div
{
 background-image: url('http://jongalli.rar.gi/update/siteimages/photography_r02.jpg');
 background-repeat:no-repeat;
 overflow:hidden;
 width:150px;
 height:50px;
 color:#ff0000;
 font-weight:bold;
 text-align:center;
 line-height:50px;
}
</style>
<div>
home
</div>
</body>
</html>
0
 
WilliamFrantzCommented:
> the images being used are part of a navigation,
> meaning that this static rule doesnt apply to me.

I've added 'text-align' and 'line-height' to your example to center the text, but I don't understand your final comment.  Are you trying to say that you can't use CSS for some reason?
0
 
jongalliAuthor Commented:
what i mean is that i cant use css to define the image for the div tag i.e. background-image: url(....) etc. the reason being is that i am loading a navigation menu dynamically from a database, meaning the image used as the background would be unknown until it is retrieved from the database - therefore it is not static
the example shown above using the background-image was just a demonstration that yes, it can be done using this method, but there must be one where i define the image using for example:

<html>
<body>
</style>
<div class="nav">
<div class="nav_text">test2</div>
<div class="nav_img"><img src="siteimages/home_r01.jpg"/></div>
</div>
</body>
</html>

and then using css to place the text over the image

hope this helps
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
zawedikianCommented:
hi,

well u can do what u want using css. All what you have to do is use the dynamic image( that is read from the database) as a background and not an image, else you wont be able to write over it.

<table>
<tr>
  <td style="background-image:url(siteimages/home_r01.jpg)" width="300" height="400">
<span class="nav_img"> TEXT   </span>
</td>
</tr>
</table>

This way, you can change the image dynamically, while the text wrote over it is controlled by the css class.
Note that the width and height are entered as you wish them to be. Also note that the same way can be applied to div not only tables.

zeina
0
 
jongalliAuthor Commented:
is there no other way other than writing the 'style="background-image:url(siteimages/home_r01.jpg)"' with each navigation item read from the database?
reason being is this inteferes slightly with my method of separating design from functionality i.e. page design is controlled by css contained in a file rather than mixed with the html code.
0
 
jongalliAuthor Commented:
sorry forgot to mention that this image, also acts as a rollover image, with javascript - not sure whether your method would work if rollover images were to be used
0
 
WilliamFrantzCommented:
I don't fully understand what your limitations are.  You can certainly create javascript files and css files on-the-fly, dynamically.  When you retrieve the menu options, create the necessary CSS to display the proper backgrounds.

CSS styles are applied in a cascading fashion which means zawedikian offers a good suggestion.  You can put all the other static CSS commands in a separate file.  Just omit the background-image and handle that from the HTML file.
0
 
jongalliAuthor Commented:
yep agree with you entirely williamfrantz. wrote the message before i began messing around with php and css a bit, and got it working like i want.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now