Solved: Website Logo Resolution: The Unfixable Problem?

guitarbard · ‎02-07-2019

I've seen the question asked over and over with no satisfactory answer. I keep trying to upload my hi-res logo so it looks nice and sharp on my site, and weebly keeps posting it as this tiny little thing that's all blurry when resized. I tried using the image-rendering tag in the CSS, but it didn't help at all, either in img {} or in #logo {}.

Any ideas?

guitarbard · ‎02-07-2019

Holy crow, I found a solution!!!

So first I put the original CSS for #logo between /* */ so I wouldn't lose it. Then I looked at my theme and found that the header container width was 940 px. I went back into my original Photoshop file and rescaled to see the corresponding height for the 940 px width (302px high). I uploaded my banner image into the assets, and then, for #logo, I put in the following code:

#logo {
	background: url(logo file name) no-repeat;
	width: 940px;
	height: 302px;
	background-size: contain;}

~~...Of course, the issue now is getting it to scale with the allotted header space, but I'll just keep working on it.~~ Then you just have to mess with the page-wrap and header tags based on your theme to fit your logo. "auto" and "repeat-x" are your friends.

View Best Answer >

guitarbard · ‎02-07-2019

Holy crow, I found a solution!!!

So first I put the original CSS for #logo between /* */ so I wouldn't lose it. Then I looked at my theme and found that the header container width was 940 px. I went back into my original Photoshop file and rescaled to see the corresponding height for the 940 px width (302px high). I uploaded my banner image into the assets, and then, for #logo, I put in the following code:

#logo {
	background: url(logo file name) no-repeat;
	width: 940px;
	height: 302px;
	background-size: contain;}

~~...Of course, the issue now is getting it to scale with the allotted header space, but I'll just keep working on it.~~ Then you just have to mess with the page-wrap and header tags based on your theme to fit your logo. "auto" and "repeat-x" are your friends.

Bernadette3 · ‎02-07-2019

Thanks for sharing @guitarbard