Custom Image in the Top Area

  • Author
    Posts
  • #119691

    weibuzz
    Member

    Is there anyway for me to get my logo as a background image that only appears in the top area where the site title and tagline is? We have the Premium Upgrade but it looks like if I try to put a background image up it stretches across the whole page.

    I’m trying to find a way for the top of the site to not look quite so bare.

    Thanks!

    Jordan

    The blog I need help with is weibuzz.blog.

    #119808

    binarymoon
    Theme Author

    Hi Jordan

    Thanks for the message.

    If you use the customizer to hide the logo, site title, and description then you could use the following custom css to add a large version of your logo to the site.

    .home .masthead .branding-menu {
        background: url(https://weibuzz.files.wordpress.com/2017/10/weibuzz_logo_ol.png);
        background-size: contain;
        background-position: center;
    }

    Depending upon preference you could also try changing background-size: contain; to background-size: cover;

    They both do the similar things but change how the image is displayed slightly

    #119905

    weibuzz
    Member

    That worked really well. Thank you so much!

    Now I have a bit of a problem though. Our image was a bit on the short side so we elongated it several times and it looked fine. I refreshed my page and the image randomly shrunk after it’s been fine for awhile. Do you know why it did that or how I can fix it? Is there anyway you can tell me the dimensions of that header space so I can see if it’s still a problem with our image size?

    Yours,

    Jordan

    #119909

    binarymoon
    Theme Author

    Hi Jordan

    I’ve had a look and it seems the css I gave you may have been a bit too specific. If you change it to:

    .masthead {
        background: url(https://weibuzz.files.wordpress.com/2017/10/even-longer-logo.jpg);
        background-size: cover;
        background-position: center;
    }

    Note that previously the change only happened on the hompeage – now it will happen on all pages. We may need to add some extra css to the site to make the internal pages work a bit better, but let’s see if this one works properly first.

    #119924

    weibuzz
    Member

    That seems to have fixed the problem nicely. I do have another question that’s a tad bit unrelated. Is there a way for me to change the color of the font without changing my entire palette?

    Sorry to be such a bother with this!

    #119934

    binarymoon
    Theme Author

    Glad that worked.

    To change the colour of the text, it will probably end up more complex than this, but we can start with using this:

    body {
    color: #fff;
    }

    You can pick your colour here:
    https://prothemedesign.com/tools/color-picker/

    #119956

    weibuzz
    Member

    That worked out really well!

    Though now I’m having an issue with my custom heading again. It looks great on desktop but on mobile it’s cutting off a chunk of our logo on the bottom. Is there a way to fix that or do I just need to adjust my picture sizing?

    Thanks again and sorry for having so many irritating questions!

    #119957

    binarymoon
    Theme Author

    Glad that worked – I expected there to be more things to adjust :)

    Regarding the header image on mobile – you can use the following to change the height:

    @media only screen and (max-width: 782px) {
    .home .masthead .branding-menu, .masthead .branding-menu {
        padding: 5.7rem 0;
    }
    }

    You need to change the 5.7 part to a number that fits what you want, and that will change the header height. I think the default is 2.7, so 5.7 is adjusted. It can be any number so adjust however you like. The rem is a unit of measurement.

    #119958

    weibuzz
    Member

    Is there one that will work for the Desktop version as well? I can’t seem to get the upper and lower dimensions right for that one

    #119962

    binarymoon
    Theme Author

    Absolutely – it’s the same actually, just without the media query.

    .home .masthead .branding-menu {
    padding: 10rem 0;
    }

    Make sure to put this one before the mobile one from above otherwise it may override the settings of the mobile one.

The topic ‘Custom Image in the Top Area’ is closed to new replies.