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.
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.
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.
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.
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.
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.
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…
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.