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

[ansullivan]

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

[stinkykong]

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

[ansullivan]

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

[stinkykong]

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

[Author]

Posts