Jump to content

Background Image under Banner title text


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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...