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, 7 months ago.

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

    Anita
    Participant
    Post count: 7409

    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/


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

    #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: 7409

    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.


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

    #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: 7409

    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!


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

    #7287

    Anita
    Participant
    Post count: 7409

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


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

    #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: 7409

    Here is a screenshot from my Android phone – LINK.


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

    #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: 7409

    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.


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

    #7462

    Anita
    Participant
    Post count: 7409

    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/


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

    #7516

    Anita
    Participant
    Post count: 7409

    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.


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

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

You must be logged in to reply to this topic.