Stretch Theme: Responsive Background Image

[AnitaC]

The background images are not responsive, at least on my Android it isn't. Is there a way to make the background image responsive? Here again is the training site I am using for testing out the themes abilities. http://mediacreationsgroup.com/wptraining/

---

Need help with customization or troubleshooting? Reach out to me.

[Riavon]

Hi Anita, I can't see your site link because it requires a login, but I use the following when I want a responsive background. Maybe this is something that can help you?

/* Scaled BG image style source: http://css-tricks.com/3458-perfect-full-page-background-image/ */

html, body {
background: url(images/bg.jpg) no-repeat center top fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;

/* Set up proportionate scaling */
width: 100%;
height: auto;

/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px;   /* 50% */
}
}

/* End scaled bg img style -------------------------------- */

---

Twitter: @riavonentprises

[AnitaC]

Hi, it's back on now. So you can take a look. I also had posted another forum question about getting the footer to "sticky". Cannot get that to work either.

---

Need help with customization or troubleshooting? Reach out to me.

[Riavon]

Thanks! Ok, I've taken some time to examine your site. Sorry I can't be more help, but I don't have the Stretch theme, so only after digging through your site's source code I realized that it seems that bg image (of the little girl) is generated by a script in the theme itself, rather than by your main stylesheet CSS.

<script type='text/javascript'>
/* <![CDATA[ */
var BackStretchImg = {"src":"http:\/\/mediacreationsgroup.com\/wptraining\/wp-content\/uploads\/2007\/03\/MP900402059.jpg"};
/* ]]> */
</script>

So, I'm a bit at a loss how to shrink that image down to fit smartphone screens unless you do some work in the CSS (along the lines of what I posted above) pertaining to that script.

I did notice that your content area (the "About" text block) gets rather "squished" at phone width, and this can be easily remedied if you do the following to your style.css

In your style sheet at line 1490 under your

/* iPhones (portrait and landscape) ----------- */

@media only screen and (max-width: 480px)

Add this:

#content-sidebar-wrap {
float: left;
width: 100%;
}

Make sure you add this within the open/close brackets for the @media styles.

As far as the footer, in my experience the Genesis child themes will push that footer down once content is added to the pages. If you don't intend to add much content to the pages then you can try adding this to your style.css in the #footer div

position:absolute;
width:100%;
bottom:0;

So it would be:

#footer {
background-color: #111;
clear: both;
overflow: hidden;
padding: 24px 0;
padding: 1.5rem 0;
text-align: center;
position:absolute;
width:100%;
bottom:0;
}

---

Twitter: @riavonentprises

[AnitaC]

Thank you!!! {{{ clapping }}} ! Both work! I checked it also on my Android. Thank you for helping me fix the content area also. I was going nuts and was afraid to post another question about Stretch!

---

Need help with customization or troubleshooting? Reach out to me.

[AnitaC]

Oh pooh, the footer is now covering the text on the Android. It's not moving around correctly. :o(

---

Need help with customization or troubleshooting? Reach out to me.

[Riavon]

Ugh! This is a screenshot what it's testing for me.

What text is the footer covering? Is there any way you can share screenshots of what's happening?

---

Twitter: @riavonentprises

[AnitaC]

Here is a screenshot from my Android phone - LINK.

---

Need help with customization or troubleshooting? Reach out to me.

[Riavon]

There must be an issue with absolute positioning for Android. I can only guess at this point that perhaps a browser detect script of some kind that either hides the footer or positions it in a different way for Android could possibly be a solution.

---

Twitter: @riavonentprises

[AnitaC]

Okay, well.. thank you for your help. I took the absolute part out and it made it go to the bottom. It's a lot better than what it was. Thanks again. I appreciate you taking the time to help me.

---

Need help with customization or troubleshooting? Reach out to me.

[AnitaC]

Ria, if you come online today - I found this instruction but I am not sure how to use it. Would you happen to know and do I copy and paste the entire code or only pieces parts of it?

http://www.jonbellah.com/2012/12/genesis-sticky-footer/

---

Need help with customization or troubleshooting? Reach out to me.

[AnitaC]

This can be closed. I cannot get any of the things I find in the Google searches to work. I am purchasing a theme from Themeforest. Thank you for trying to help me.

---

Need help with customization or troubleshooting? Reach out to me.

[Author]

Posts