How do you make a CSS image-replaced logo responsive?

Hi Brian,

Can you please post an example or snippet of your code? You can paste it in this thread, or use http://codepen.io/

Thanks!

Sure thing, Guil. This is the markup for the clickable logo:

<h1><a href="index.html">modo</a></h1>

and this is the css: .header h1{ display: block; float: left; width: 252px; height: 98px; background: url(../images/logo.png); text-indent:-9999px; }

Trouble is I'd like the image (logo.png) to adjust to different browser sizes. Thanks alot

oops! The markup isn't visible. Here ya go: <h1><a href="index.html">modo</a></h1>

Sorry about that. Having trouble with that markup. Basically, the HTML is the word 'modo' within a H1 tag and it's a link as well

No worries. Since you're using the image replacement technique, you can use the background-size property to scale the size of the image, then also declare the width / height of the logo in percentages.

I'd like to see this in context, so if you can, please post the rest of your HTML & CSS for this.

If you're still having issues posting the markup, check out the markdown cheatsheet link below, which explains how to add the markup in your posts :)

@Brian - If you are still having trouble, you can help us help you by creating a "working" example using something like codepen.io

If this is about a particular code challenge/video can you post a link to that as well so everyone is on the same page about what you are trying to do.

Thanks for the tips, guys. I've never used Codepen before so I just checked it out. The URL for the code is http://codepen.io/anon/full/ArdqD Now, if you check out the example on the page, it doesn't scale down when you resize the browser esp. when you make it way small. I would like it to be responsive and scale up or down as I resize the browser. Sorry for all the trouble...just slowly getting a hang of everything. Thanks again

@Brian – The link you sent links to a blank Codepen page. Be sure to save before you click "share" :)

Thanks!