Home Forums Archived Forums Mobile View I can put an image over a background on the header but can I make it larger on mobile?

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #18307
    Qoheleth
    Participant

    I have a technique for using both a background image and a foreground logo on the header as follows:

    In the Weaver Extreme Theme Options Header Area BG use this CSS
    {background-image: url(‘[blogurl]/wp-content/uploads/header-bg.jpg’)}
    Use Customize | Header Image to load in your logo
    Then under Theme Options Header Image, set the Maximum Image Width to 25% (or whatever works for your logo).

    Here’s the question: This works quite well on desktop views, but looks a bit smallish on mobile views. I’ve ready through the technique for using a different header image for desktop and mobile (here), but I’m wondering if there’s a simpler way to keep everything the same and just make the Maximum Image Width different for mobile and desktop. If there’s a different way to do both background and foreground images that works better, I’m up for that too.
    #24749
    scrambler
    Moderator

    Please always include a link to your site…

    #24750
    Qoheleth
    Participant

    sorry. here’s the link: disciplesnet.org

    I’ve also tried putting the image in a header widget but, for some reason, the image either appears above the header or not at all, depending on the Header Widget Area Position setting.
    #24751
    Qoheleth
    Participant

    I can’t believe I missed this earlier, but I found the Site Logo/HTML entry in the Site Title/Tagline section. It looks like it would be easier to use this, however, if you take a look at testing.disciplesnet.org, you’ll see I’m having a hilarious issue with sizing the image. Is there a way to style an <img…> so that it takes on (at least) the current height of the header? I tried variations on the branding selector to no avail.

    #24752
    scrambler
    Moderator
    Using the logo image to do what you want is not going to work responsively. We can limit the size of the logo image by adding a max-height on it like below
    <img style:”max-height:100px;”…./>
    But as the browser gets smaller, the header image is going to scale down and a white are will appear at the bottom.
    1- If you want that logo on the shaded background image, why dont you simply merge the two in an image editor, This would allow you to have the whole image scale together.
    2- If what you are trying to do is avoid for the logo image to scale down when the browser gets smaller, it would actually be easier to make your logo image the size you want it on the screen, then use that logo image as the header image, and use the header image options “Use actual Image size” and “Align Left”
    Then you would place your shaded background image with the rule below in the Header Area BG CSS+ box
    {background:url(ImageUrl) repeat-x;}
    #24753
    Qoheleth
    Participant

    Yes. I started with a combined image and it works exactly as you said. I was trying to get cute (probably too cute), being able to independently change either the background or the logo.

    This looks like another case where judicious use of an image editor is better than trying to play programmatic tricks.
    With a single image, I can just use Customize | Header Image.
    Thanks.
    #24754
    scrambler
    Moderator
    Yes, but a combined image will scale with the browser and may make the logo too small on mobile.
    In your case I believe what you were looking for is the solution I described in 2- , as it will allow the logo image to stay big when the browser gets smaller
Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘ Mobile View’ is closed to new topics and replies.