Jump to content

Background Image under Banner title text


MikeFloutier

Recommended Posts

Hi,I'm finding that if the browser doesn't have the preferred font for my banner's title text then the background image's height tends to vary according to which font IS selected as an alternate.In this case I want it to use "comic sams MS" but if that's not available then "verdana" is next on the list and this, being shorter in height (presumably), leaves a gap between the bottom of the background image and the banner's border.My present method of making the background image fill the gap (top & bottom) between the text and the banner's borders is to use padding.THis is the CSS:

#main-title {margin-left: 250px;margin-right: 250px;padding-left: 11px;padding-right: 10px;font-weight: 300;font-size: 4.0em;text-align: center;font-family: "comic sans MS", verdana, arial, helvetica, sans-serif;background-image: url(Images/centre-image.jpg);border-left: 1px #b90970 solid;border-right: 1px #b90970 solid;padding-top: 10px;padding-bottom: 10px;}

And this is a link:http://www.exhortations.co.uk/I could just drop the "comic sans MS" but I much prefer it so I dont want to.I could also convert the banner to an image but I dont think that would work with it's width re-sizing capabilities.Any ideas as to how I can get a fixed height on the background image so any text can go on top without mucking things up would be much appreciated.ThanksMike

Link to comment
Share on other sites

#main-title {margin: 0 auto;text-align:center;font-weight: 300;font-size: 4.0em; ==> set to a specific px height ???text-align: center;font-family:"comic sans MS", verdana, arial, helvetica, sans-serif;background-image: url(Images/centre-image.jpg);border-left: 1px #b90970 solid;border-right: 1px #b90970 solid;padding: 10px;}

I might suggest trying to set a specific height for the text. I understand the reasons for the usage of em's but if the substitute font is smaller, this may solve the problem. Also, have you played with the margins and padding to see if these are affecting the results?

Link to comment
Share on other sites

Thanks,I really thought you had it there with the px instead of em thing; "surely that will control the height of the font" I thought.For some reason comis sans MS seems to add some of it's own padding around the font (at least that's how it seems to me). Also I've tried messing with margin and padding but they either introduce a new problem or exaggerate the existing one.I think I'll have to bite the bullet (haha BiteMe) and ditch the offending font.Mike

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...