Header Looks Blurry on Expound Theme
-
I created a custom header using photoshop containing two silhouettes and the name of the site. The logo looks clear and crisp in photoshop but when I upload it to my site is looks blurry around the letters and around the two silhouettes. Can someone offer some advice?
https://thebaseballscholar.com/
The blog I need help with is: (visible only to logged in users)
-
Hello there!
Are you able to look at the file of the image that’s saved onto your computer and let me know if it looks blurry or not? When you save an image off of photoshop you have an option to select the quality, did you set it to the highest?
Thanks,
Sage -
Sage,
The quality of the image is great. Crisp and clear. When I saved it I saved the image quality as 12 (maximum) and the format option was progressive.
Does any of that help?
-
Sage,
I admittedly don’t understand images and photoshop very well but I read on an old post right before you replied and they suggested trying to save it as a png and upload and that seems to have done the trick. Check it out.
https://thebaseballscholar.com/
Do you know why using a png looks great and the jpg looked not great? If so, can you explain to me why?
-
Hey there,
That’s great! I was actually just checking the site again before I replied to your previous comment and was squinting to try and see any blurryness haha.
In simple terms as I understand it, pngs are a higher quality and have a “lossless compression” which means they won’t go pixely. jpgs on the other hand lose their quality as they are compressed which is great for sticking images on the web to help with loading times and works for a lot of images — but it’s not so great with images that have text etc in them. As seen here, they can also be compressed further which isn’t ideal for important things like logos. If you’d like further reading then “difference between png and jpg quality” on google is pretty useful.
Glad to head it’s all sorted,
Sage -
Sage,
Now I have an issue with my background. I’m using radial gradient for my background. Looks great on desktop but when I look on my iPhone 6 it still has the previous gray background. Below is the css I used to achieve the current background on desktop:
body.custom-background {
background: radial-gradient(#000088,#cc0000,#ffffff);
background: -webkit- radial-gradient(#000088,#cc0000,#ffffff);
background: -moz- radial-gradient(#000088,#cc0000,#ffffff);
padding: 44px 0 22px;
}Any idea what my issue is?
Also, I’d love if I could make the color to the left red and the color going to the right blue. Is that possible?
-
Hello there!
This code should target the mobile site’s background:
body.mobile-theme { background: radial-gradient(#000088,#cc0000,#ffffff); background: -webkit- radial-gradient(#000088,#cc0000,#ffffff); background: -moz- radial-gradient(#000088,#cc0000,#ffffff); }Regarding the background colour changing, I’m not an expert on gradients, but I think with the radial type that you have it just goes in a circle so can’t really have it change horizontally if that makes sense?
That being said, if you prefer that way then something like this might work for you:
body.custom-background, body.mobile-theme { background: #ffffff; /* Old browsers */ background: -moz-linear-gradient(left, #ffffff 0%, #cc0000 20%, #000088 80%, #ffffff 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #ffffff 0%,#cc0000 20%,#000088 80%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #ffffff 0%,#cc0000 20%,#000088 80%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */ }Hope that helps!
Sage
- The topic ‘Header Looks Blurry on Expound Theme’ is closed to new replies.
WordPress.com Forums 