I tried to reapply a new logo to the site and now the logo does not appear without being cut-off on all sides. It appears in a small box, much smaller than the dimensions of the logo itself. I’m using Style 9.
Ideally, I’d like to use a background image behind the logo itself. How would I accomplish this?
Apparently the images were set to ‘thumbnail’ when I was uploading them (regular, retina). I switched them to ‘full’ and that solved the boxed issue.
However, how would I apply a background image to the logo banner area so that the image is always matched to the width of the site, regardless of browser sizing?
Also, if that’s not possible, how would I add margins to the top and bottom of the logo as it sits in front of the background color?
Hello cantonjester,
Please provide your website URL together with some useful screenshots where you should show me the problem.
Thanks for the message!
Website is cet.robywebdev.com
I was able to build the logo into the background with an image editor to achieve a desired effect. Question: for the retina logo, would I just build that same logo with background, twice the size?
Also – if my client does not like the picture behind the logo, and instead wants to use a color background, that’s when I run into the problem of the logo reaching the top and the bottom of the background color. I’dneed to add margin-top and a margin-bottom to the logo in the custom CSS in that scenario.
Keith
Hi,
The retina logo has to be twice the size of the normal logo image, it will be used on retina displays. Create it and upload it in the theme panel.
A background color can be set for the header, in the theme colors section
– https://www.screencast.com/t/KxBAh012
The background color will be displayed in the available space, behind the logo image.
Thanks
Thank you for information about retina logos.
However – When I apply the logo with a background color, the logo itself touches the top and bottom edges. I need to create space in the margin-top and margin-bottom so that the background is visible in the top most and bottom most areas. What CSS do I use to modify this?
Hi,
I understand now what you mean. You want to create some space above and below the logo image, in order to display a background color. Something like this maybe
– https://www.screencast.com/t/yhsqEsnJLG
.td-header-style-9 .td-banner-wrap-full.td-logo-wrap-full{
padding-top: 50px;
padding-bottom: 50px;
}
Set a background color for the header as shown in the theme panel, and use the code.
Thanks
