header ('background') graphic in 'Beautiful Pro' theme not responsive

Community Forums Forums Design Tips and Tricks header ('background') graphic in 'Beautiful Pro' theme not responsive

This topic is: not resolved

This topic contains 3 replies, has 2 voices, and was last updated by  stinkykong 4 months, 1 week ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #77594

    ansullivan
    Participant
    Post count: 1

    hey all… so here’s my issue: the “background image” (which we’re using as a header graphic in the Beautiful Pro theme & is the one that says “Tara Leaver” etc) is just not scaling down in mobile devices.

    i tried installing the Genesis Responsive Header plugin (which i LOVE), but it didn’t work in this case (assuming that’s b/c this isn’t actually the header but is classified as the background instead?). cannot figure out how to get the header (‘background’) to show up properly in mobile devices. ideas?

    thanks in advance!!

    http://TaraLeaver.com
    #77611

    stinkykong
    Participant
    Post count: 139

    Try adding this to style.css

    .custom-background .site-header-banner {
    background: url(“http://taraleaver.com/wp-content/uploads/2013/12/tara-header3.jpg”) no-repeat scroll center center / 100% auto #FFFFFF;
    max-width: 1000px;
    margin: 0 auto;
    }

    (edited with a little extra added)


    Web Design by Websentia Web Services
    http://websentia.com

    • This reply was modified 4 months, 1 week ago by  stinkykong.
    • This reply was modified 4 months, 1 week ago by  stinkykong.
    #77691

    ansullivan
    Participant
    Post count: 1

    hey stinkykong…

    tks for the above. your time & energy are super appreciated :-)

    just tried it both ways (with the original and with the edited, above) and it didn’t seem to change anything.

    i’m beginning to wonder if there *is* actually a way to do this, or if i might be better off changing the side of the ‘header’ and using that instead of the ‘background’…?

    tks again

    #77696

    stinkykong
    Participant
    Post count: 139

    There is. May take some experimenting and I’m sorry I don’t have a fail-safe remedy. I don’t know this theme particularly. I’m trying ideas using the Firebug add on for Firefox.

    I see you also have issues with your body content sized at 1000 and no class for the container div and that might also add issues when viewing on actual devices such as phone or tablet.

    Can you add a rule near the bottom of your style sheet (but above the @media queries) that reads:

    .custom-background .site-header-banner {
    width : 100%; !important;
    max-width: 1000px !important;
    }

    The !important element may not be needed. I use this on various themes with success and perhaps additional fiddling.

    I have done similar headings at

    http://tcgihost.com/~rhumc/


    Web Design by Websentia Web Services
    http://websentia.com

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.