Format fluid heading

HTML & CSS
1

all I want to do is format my h1 text on a background image that will resize gracefully on multiple devices.

It should take 30 seconds. I have now tried everything I can imagine on this for hours a day for over three weeks to no avail.

I can’t get the background to show the full height of my image without resorting to

 header {
     background: #DDC58A url("../banner/header.png") no-repeat;
     height: 100vh;
 }

which of course is overkill. Even if I alter the vh percentage.

Most recently I resorted to

<h1><img src="../gamesonhorses/img/bannerGamesOnHorses.png" alt="Games on Horses"></h1>

with the idea that SEO will rank on the “alt”.

This is pretty fundamental stuff. I cannot imagine why I am making this so hard. But I need to get over this stupidness and put my attention on content.

Please help.

grNadpa

2

Is the header element empty, as in it’s just a container with a background image?
Without any content, it will have no height unless set. But a fixed height won’t be responsive, to maintain an aspect ratio, use padding-top with a % value, where the % relates to the aspect from the width.

3

Here is a quick example:-

Though a header with no content does not have much meaning. If this is your logo/title h1 then you will want something other than an empty header for the purpose of accessibility and seo.

4

Terrific, SamA74. Thanks.

I’ll give it a shot after doing a Chrome inspect on your example. Though I am not sure I’ll be able to parse the relevant components from what appears to be a sophisticated layout.

What remains is a Font dilemma.

Because the Games on Horses site supports my wife’s book by the same name, I’d like to keep the font for the H1 the same as the custom “Allura” font the book uses for its title page. Being a custom font, I have rendered the title as an image which, as mentioned, I’ve used in an H1 tag relying on the Alt code to serve SEO crawlers. Is there a better way to handle a custom font?

I suppose I could include an h1 text but make it hidden or it move off the page. But that has a real bad taste to it.

I’m off to inspect your example.

Thanks again.

5

With Codepen you should not need inspect, it can show the html and css alongside the result.
It’s actually very simple when you see the code. In html the header is just an empty element. In css it just has a background image, size set to 100% and padding-bottom to give height expressed as a percentage of the width.

You could search on-line for the same or a similar font to use. Custom fonts are quite common on the web these days. But if you do use an image, the alt text is important, you can still style the text (h1) in case the image fails to load.

6

Thank you. Very helpful.

My bad. I thought the codepen icon was part of your example, not the tool to inspect it.

Thanks again.

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.