Hi Andrew,
I”m” trying to cover the masthead background with an image boarder to boarder. The image I have covers but it is cropped after adding it to the masthead background. (dashboard>customizing>theme design>page). I tried dropping in several codes into the Custom CSS editor that I found on some closed threads you suggested. But the image does not change. It’s like to CSS has no effect. Am I doing it wrong? The titles for the codes I dropped in are: (/* Masthead Background Image Cover */ and /* Full header logo */). Copy and paste… nothing happens. Am I using the editor incorrectly?
Thanks for our help.
Brad
Hi Brad
Thanks for reaching out.
The settings provided at AppearanceCustomizeTheme DesignPageMasthead Background Image and Masthead Background Image Layout should be all that’s needed. Is Masthead Background Image Layout set to Cover?
Your Masthead Background Image is covering.
Consider adding your logo background image to the settings provided at AppearanceCustomizeTheme DesignPageMasthead Background Image. Next, delete your logo image and consider using the Site Title for the logo text.
You can change the site title font and size at Theme DesignFonts.
Page: Fonts
Hope that helps :)
Andrew,
Thanks for getting back to me. The masthead image covers (the settings you recommended in your first response are good) but it is not the entire image. It’s cut off at the sides and bottom. If you still have the url (yourlivingcurriculum.com), the logo image is in front of the masthead image. They are both the same image. (I think it looks kinda cool to have the home logo as an image that “floats” on top of the masthead image. I like that effect.) The background image in the masthead hopefully should be identical to the logo image, just larger. That’s what I am trying to get. Will try your most recent post for using the site title and let you know how that works out.
Thanks for your time,
Brad
I got another site as well that I’m working on. I’ve changed it over to Vantage as well to keep my sanity. Will be upgrading in the future to get everything tight. But for now, a lot of general stuff needs attention. Have a good day.
Hi Brad, thanks for your reply.
It’s, unfortunately, expected that the images won’t be mirrored. The logo image is at 100% width and the masthead background is covering. 100% width and cover are two different methods of display.
Cover is described as:
Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges
Ref: https://www.w3schools.com/cssref/css3_pr_background-size.asp
Hope that helps to explain what’s happening.
Have a good day too :)
So, resize the image before uploading and experiment with the fit?
If you change the background setting to Default or Center, you could, yes.
Or leave as Cover and adjust the image as required.
Andrew,
Thanks for the link to W3…. really helpful. Tried your suggestions above. The new appearance looks OK. But, I’m kinda sold on the logo image above the masthead ( I haven’t seen anyone do that.). Will experiment with the background size. Can I influence the syntax using the CSS? Yes, or No?
Thanks again… hope you had a day off over the long weekend.
Brad
Hi Brad :) For sure, you can use Custom CSS to override any values already declared by CSS. Custom CSS can be added via AppearanceCustom CSS if you’re using SiteOrigin CSS or you can use the core WordPress location at CustomizeAdditional CSS. We can offer assistance with small tasks of that nature within our premium support scope.
Hi Andrew,
I settled on a different “part” of the original image, added a widget opposite the logo, and learned some other setting I could use. Thanks for your help and suggestions. I think I’ll leave you for now. Will get Premium when I need secure information from users in a form. Enough to work in the meanwhile. Thanks again. You guys did a great job on Vantage….
Brad
PS: I’d close out this post if I new how… or is that something you do?
Hi Brad, thanks for the update, glad to hear you were able to settle on a solution for the moment. I’ll close the thread. Cheers for now :)