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 days, 1 hour 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 days, 1 hour 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. 3 days, 19 hours 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. 3 days, 19 hours 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. 3 days, 15 hours ago bradleybudinger

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

  6. 3 days, 15 hours ago Andrew Misplon Hi, I Work Here

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

  7. 3 days, 15 hours ago Andrew Misplon Hi, I Work Here

    Or leave as Cover and adjust the image as required.

Please log in to post on our forums. Signing up is free.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More