Should be easy. Whats the best way to do this?

HTML & CSS
1

The words are normal text in the html. The underline graphic I want to put centered under it. But I need the graphic to shrink (preferably automatically but not deal breaker) in accordance with the text. So when I start coding it for mobile and shrinking things.

As of now I have the graphic as a h1:after. I don’t want to put it in the html as a img. There has to be an easy way that Im not thinking of.

Thanks!

2

Can you show the html & css you have so far?

So you have the text shrinking already? How are you doing that, with vw units?

3

Hello. Not yet. But when I do i’ll prob just shrink it in absolute pixels.

Im guessing there is an easy way. But if not I can just image replace the h1. That may be easier.

Messing with various responsive background image tricks on the web but no luck yet.

Like if the graphic was a img I could just scale it down as I scaled the text down. But a graphic should not be in the html as an img. And of course I could just make multiple graphic sizes in photoshop but seeing if there is a css way first before I get my hands dirty in photoshop.

4

Hi, I am not sure if this is the best way to do it. Take a look at the Live example below: (click RUN).

Also, here is the code:

<style>
.logo {
width: 50%;
height: auto;
margin: auto;
text-align: center;
font-size: 1.8vw;
}

img {
width: 100%;
}

h1 {
padding: 0;
margin: 0px;
}
</style>

............

<div class="logo">
<h1>LANDLORD LEASE FORM</h1>
<img src="https://i.imgur.com/4KUHHyr.png">
</div>
1 Like
5

Thanks. Yeah thats the easiest way to do it. But I would prefer to not put the graphic as a img in the html. I try to reserve img for seo/google. Trying to find a background image trick way to do the same thing.

6

sorry, I just noticed that you mentioned that in your question.

7

I was thinking something like this:-

You need to replace the image with yours and alter the padding to match the aspect ratio.
Though with no code to see of yours, it’s impossible to create a solution that fits the context of your particular layout.

3 Likes
8

Thanks Sam. Ahh or I could use background-size and adjust the h1:after graphic per nessesary

9

Not sure what you are asking. Using background-size: 100%; padding-bottom: n% /* n = aspect ratio */ will resize the image proportionally to the title width. What more do you need?
How you size the title is up to you, be it progressively via media queries, or with dynamic units like my example, the image should be taken care of by this.

10

I wasn’t asking. Just making a revelation statement. :slight_smile:

11

Here is what I came up with. Floated the containing div left so it wraps it all times. This makes it so the graphic under the h1 follows the size of the heading. Automatically.

<h1><a href="/">HEADING</a></h1>

h1:after {
content:"";
background:url(/img/underline.png) no-repeat 0 0;
height:60px;
width:100%;
background-size:100% 60px;
display:block;
}
12

Actually I can do away with the containing div float left. Just float the h1 left and the h1:after follows the h1 container. I knew there was an easy way. Just had to stare at it long enough. So…

<h1><a href="/">HEADING</a></h1>

h1 {
float:left;
}
h1:after {
content:"";
background:url(/img/underline.png) no-repeat 0 0;
height:60px;
width:100%;
background-size:100% 60px;
display:block;
}
13

You have a proportional width and a rigid height, that’s going to lead to distortions when you resize. Using the proportional vertical padding as I showed should fix it.

1 Like
14

Thanks I’ll play with it. That 60px size is just in for testing. Going to size it perfect in photoshop then just background-size it 100% it always

15

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