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  Anita 1 year, 8 months ago.

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

    Anita
    Participant
    Post count: 7582

    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/


    When asking for help, please provide a link or screen shot showing your problem!
    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me!

    #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

    Anita
    Participant
    Post count: 7582

    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.


    When asking for help, please provide a link or screen shot showing your problem!
    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me!

    #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

    Anita
    Participant
    Post count: 7582

    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!


    When asking for help, please provide a link or screen shot showing your problem!
    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me!

    #7287

    Anita
    Participant
    Post count: 7582

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


    When asking for help, please provide a link or screen shot showing your problem!
    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me!

    #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

    Anita
    Participant
    Post count: 7582

    Here is a screenshot from my Android phone – LINK.


    When asking for help, please provide a link or screen shot showing your problem!
    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me!

    #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

    Anita
    Participant
    Post count: 7582

    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.


    When asking for help, please provide a link or screen shot showing your problem!
    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me!

    #7462

    Anita
    Participant
    Post count: 7582

    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/


    When asking for help, please provide a link or screen shot showing your problem!
    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me!

    #7516

    Anita
    Participant
    Post count: 7582

    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.


    When asking for help, please provide a link or screen shot showing your problem!
    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me!

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

You must be logged in to reply to this topic.