is there another way

[akurtula]

hi

i just wanted to add a background image to a h2 tag:

Code:

aurel

/*—————– CSS ———–*/

H2{
padding: 60px; /* <---- THIS IS MY PROBLEM --->
width:325px;
height:114px;
background: url(images/tag.jpg) no-repeat;
}

the padding at the moment is ok – however (i had this problem before) – if the h2 text grows to "aurel kurtula" – the padding would need to be modified – i know by wrapping the h2 with another div, the problem is solved, something like:

[url]

<div class="title">
<h2>aurel</h2>
</div>
CSS
.title{
width:325px;
height:114px;
background: url(images/tag.jpg) no-repeat;
}
h2{
width:200px; /*margin would have no effect without a width*/
margin:auto; }
[/url]

i have been wondering about this before, IF there is a way to center elements that do not have a specific width.

hope you know how to do this
thanks

[Makeshift]

you can fix this using jQuery by putting an inline level element like a span within a block level element like a div or h2.

Html:

Code:

aurel

CSS:

Code:

h2 { padding: 60px; height: 114px; }

jQuery:

Code:

$(function(){
$(‘h2’).each(function(){
$(this).width($(‘span’, this).width())+120; //add paddingx2
});
});

[birdrockdesigns]

Are you using the same background image for h2 tags?

If so, then use text-align: center; for your h2 tag – should help with padding issues , at least left and right padding that is…

[Author]

Posts