text backround image

Hello experts.
I want to use a backround image for my titles.
The width must depend the text.
I have a main image that has a big width and a right image that is "closing" the backround.
I post an image how it looks like and the two parts of the images.
Any help with this?
(it is a test image,so don't care about the widths and heights)
test.gif
LVL 2
PanosAsked:
Who is Participating?
 
gavsmithCommented:
You could try:

<style type="text/css">
.main
{
    background-image: url('style/images/titlepapyrus_left.gif');
    background-repeat: no-repeat;
    background-position: left;
    padding-left: 20px;
	padding-bottom: 0px;
	margin:0;
    display:inline-block;
	height:46px;
    zoom:1;
    *display:inline;
}

.content
{
    padding-right:20px;
    background-image: url('style/images/titlepapyrus_right.gif');
    background-repeat: no-repeat;
    background-position: right;
	height:46px;
    zoom:1;
    *display:inline;
}
.content span{
	 color:#FFF;display:inline-block; padding-top:10px; font-size:18px; font-weight:bold;zoom:1;
}
</style>

 <div class="main"><div class="content"><span>Testtestetststst</span></div></div>

Open in new window

0
 
gavsmithCommented:
Setup a style similar to this (I've used H1 but you could change that to a class if you like):

H1
{
    background-image: url('../images/main_part.png');
    background-repeat: no-repeat;
    background-position: left;
    padding-left: 10px;
    display:inline-block;
}

H1 span
{
    padding-right:10px;
    background-image: url('../images/right_part.png');
    background-repeat: no-repeat;
    background-position: right;
}

Open in new window


you may need to play with the padding to get the correct sizes for your picture.

Then create a title like this:

        <h1><span>Test</span></h1>

Open in new window


regards
0
 
PanosAuthor Commented:
Hi gavsmith
Thanks for the fast post.
Take a look at my code.I have a div instead of h1 and set a heigth for div and span but is still looks bad.
i test this with my original images
<style type="text/css">
.main
{
    background-image: url('style/images/titlepapyrus_left.gif');
    background-repeat: no-repeat;
    background-position: left;
    padding-left: 10px;
	padding-bottom: 0px;
	margin:0;
    display:inline-block;
	height:46px;
}

.main span
{
    padding-right:20px;
    background-image: url('style/images/titlepapyrus_right.gif');
    background-repeat: no-repeat;
    background-position: right;
	height:46px;
	color:#FFF;
}
</style>

 <div class="main"><span>Testtestetststst</span></div>

Open in new window

test2.gif
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
gavsmithCommented:
Try adding display:inline-block to the span element also:

<style type="text/css">
.main
{
    background-image: url('style/images/titlepapyrus_left.gif');
    background-repeat: no-repeat;
    background-position: left;
    padding-left: 10px;
	padding-bottom: 0px;
	margin:0;
    display:inline-block;
	height:46px;
}

.main span
{
    padding-right:20px;
    background-image: url('style/images/titlepapyrus_right.gif');
    background-repeat: no-repeat;
    background-position: right;
	height:46px;
	color:#FFF;
    display:inline-block;
}
</style>

 <div class="main"><span>Testtestetststst</span></div>

Open in new window


regards
0
 
PanosAuthor Commented:
Yes.It is much better now.
Do i have to add an extra tag to enclose the text to add padding to center ......aso?
0
 
gavsmithCommented:
Yes I believe you will have to. If you apply it to the span it will make the image go out of line.
0
 
PanosAuthor Commented:
The following code is working.
Is there any hack for IE?
<style type="text/css">
.main
{
    background-image: url('style/images/titlepapyrus_left.gif');
    background-repeat: no-repeat;
    background-position: left;
    padding-left: 20px;
	padding-bottom: 0px;
	margin:0;
    display:inline-block;
	height:46px;
}

.content
{
    padding-right:20px;
    background-image: url('style/images/titlepapyrus_right.gif');
    background-repeat: no-repeat;
    background-position: right;
	height:46px;
}
.content span{
	 color:#FFF;display:inline-block; padding-top:10px; font-size:18px; font-weight:bold;
}
</style>

 <div class="main"><div class="content"><span>Testtestetststst</span></div></div>

Open in new window

0
 
PanosAuthor Commented:
Perfect!!
0
 
PanosAuthor Commented:
Thank you for your help!
regards
panos
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.