Logo Size/Blurriness/CSS
-
Hi, I’m using the Gateway Theme. For my logo or background image/header have an image that is 2560×640. I have tried using it as my background/header image since wordpress says 2560×640 is the ideal size for that space and it ends up being a smidge distorted and cut off. I try resizing it in the edit photo option when I upload it and that doesn’t do anything. I now have it as my logo (and have modified the size with CSS), and the size I can be ok with but it is blurry on my husband’s computer and on the computer of the woman who created the image for me. It is perfectly crisp and clear on my end. My CSS right now is
.site-logo {
max-width: 2560px;
max-height: 640px;
width: 960px;
height: 240px;Any idea what I should do to make sure the image is NOT blurry for anyone who makes their way to my blog please?
Thank you SO much in advance for any help you can offer!
The blog I need help with is: (visible only to logged in users)
-
Hi @stephanieshistorystore, it is always best to modify the size of your image to exactly the size required, either for the logo or for the header in a dedicated image editing program on your computer. They are always better at such things.
The site logo is resized by WordPress and the theme for a max height of 160px and the width is set to 100%/auto. WordPress actually created an image for your site logo at 300px x 75px. The CSS you have in your custom CSS is actually trying to increase the size of that image to 960px, over three times its original size. That is why it is pixelated. Also, if you notice, when you narrow down your browser window, the image does not resize for the screen/window size, even though the content and such does.
If you insert the image as a header image, we can help get the entire image to show using CSS. I would not suggest using the logo feature as it is designed to display a very small image.
-
Thanks! Do you know how to make the whole image appear in the header? Should the image be originally created a bit smaller or is there a code to write?
-
The type of header that you are using is not what the designer had in mind when they created Gateway. The header image they envisioned was something that could be positioned, cropped and sized. Take a look at the header image on the Gateway Demo site and widen and narrow your browser to see what happens to the image.
Currently I’m seeing the Twenty Eleven theme on your site, which is much better suited for the type of header image you are wanting to use. It would be difficult to get Gateway to work well with your image.
-
Hi! Yeah I actually decided to change the theme, made all the modifications, and I pressed submit and then came here to let you know what I ended up doing. Thank you SO much for your help! There’s definitely a learning curve here and I appreciate not having to flounder by myself!
-
- The topic ‘Logo Size/Blurriness/CSS’ is closed to new replies.
WordPress.com Forums 