Stretch Theme: Responsive Background Image

Community Forums Forums General Discussion Stretch Theme: Responsive Background Image

This topic is: resolved

This topic contains 11 replies, has 2 voices, and was last updated by  AC 1 year, 9 months ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #7254

    AC
    Blocked
    Post count: 7712

    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/

    #7268

    Riavon
    Participant
    Post count: 95

    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

    #7269

    AC
    Blocked
    Post count: 7712

    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.

    #7279

    Riavon
    Participant
    Post count: 95

    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

    #7286

    AC
    Blocked
    Post count: 7712

    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!

    #7287

    AC
    Blocked
    Post count: 7712

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

    #7291

    Riavon
    Participant
    Post count: 95

    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

    #7305

    AC
    Blocked
    Post count: 7712

    Here is a screenshot from my Android phone – LINK.

    #7307

    Riavon
    Participant
    Post count: 95

    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

    #7308

    AC
    Blocked
    Post count: 7712

    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.

    #7462

    AC
    Blocked
    Post count: 7712

    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/

    #7516

    AC
    Blocked
    Post count: 7712

    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.

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

You must be logged in to reply to this topic.