Scale a background image in .site-title

  • Resolved printergirl

    (@printergirl)


    9 years, 4 months ago

    Client wants a banner logo instead of the smaller logo area that runs across the width of the theme. So I added the following CSS to insert it into the .site-title area:

    #header {
    background: url(XXXX);
    }

    .site-title {
    height: 420px;
    }

    This worked, but it doesn’t scale on mobile, of course. Anyone know of a fix or workaround so it doesn’t look so bad on mobile?

Viewing 11 replies - 1 through 11 (of 11 total)

  • Hi printergirl. Can you post a link to your site? Thanks.

    I’d like to jump on this thread. I’m lurking because I have a similar desire — to put a background image in the header. So if bdbrown or others have a better suggestion for responsive background image in the header (and can also help a guy out who doesn’t even know where I’d call to my new class in header.php file either… I’m a real dummy.)

    Thanks!

    Zach

    My site is: https://www.freshestfridge.com … You can see a banner there where the logo is right now.

    Thread Starter printergirl

    (@printergirl)

    This is my clients site: https://itsateapartyyall.com

    Probably the easiest way to accomplish this is to use Theme Options > Header and upload your image as a Custom Logo, which it looks like Zach has already done. Don’t worry about setting the max-height in Styling; use the css below in a child theme style.css file or use a plugin like Simple Custom CSS:

    /* make image responsive */
.site-title img {
  width: 100%;
  height: auto !important;
  max-height: 400px !important;
}
/* remove padding to fit image in header */
#header .pad, .site-title {
  padding: 0 !important;
}

    Set the max-height to at least the height of your image. Smaller will compress and distort the image. Larger is ok since the image won’t display any taller than the actual image height.

    Thread Starter printergirl

    (@printergirl)

    bdbrown, you are a genuis! Thanks. That worked perfectly. Thank you so much. I was wracking my brain for a solution. ??

    I’ve been looking for this as well. Thanks a lot for the answers bdbrown.

    I just encounter a problem like this and you gave me the answer and it actually works well. Thanks! bdbrown.

    I have tried this in both a child theme and in Simple Custom CSS. It’s not working. I have wp.org Hueman theme. Can’t get my header logo to look bigger on the site. I added another image in the Ad widget to at least not make it look completely empty.

    Help? I have so many other pictures on the site that the logo is almost overpowered.
    https://everybodyslost.com

    Love the Hueman theme. This is really the only confusion.

    Thanks!

    Update to post directly above mine – that’s me, too – I finally got it to work by adapting BDBrown’s recommendation in the CSS Syle Sheet Editor. All I did was add this:
    .site-title a img {
    max-height: 400px;
    }

    and it worked. Thanks for the help!

    @bti2015: the likely reason you didn’t get any replies to your request is because this topic is already marked as Resolved. Most of us helping on the forums do not check Resolved topics for additional posts, even if they’re at the top of the list. You’re far better off to create a new topic. See this section in the Codex for more information.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Scale a background image in .site-title’ is closed to new replies.