Home>Support>CSS Editor Does Not Effect Masthead Image

CSS Editor Does Not Effect Masthead Image

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

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 4 months, 7 days ago Andrew Misplon Hi, I Work Here

    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?

  2. 4 months, 7 days ago Andrew Misplon Hi, I Work Here

    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 :)

  3. 4 months, 7 days ago bradleybudinger

    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.

  4. 4 months, 7 days ago Andrew Misplon Hi, I Work Here

    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 :)

  5. 4 months, 7 days ago bradleybudinger

    So, resize the image before uploading and experiment with the fit?

  6. 4 months, 7 days ago Andrew Misplon Hi, I Work Here

    If you change the background setting to Default or Center, you could, yes.

  7. 4 months, 7 days ago Andrew Misplon Hi, I Work Here

    Or leave as Cover and adjust the image as required.

  8. 4 months, 3 days ago bradleybudinger

    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

  9. 4 months, 3 days ago Andrew Misplon Hi, I Work Here

    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.

  10. 3 months, 28 days ago bradleybudinger

    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?

  11. 3 months, 28 days ago Andrew Misplon Hi, I Work Here

    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 :)

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More