Community Forums › Forums › Archived Forums › General Discussion › Stretch Theme: Responsive Background Image
Tagged: responsive background, Stretch theme
- This topic has 11 replies, 2 voices, and was last updated 11 years, 3 months ago by Anita.
-
AuthorPosts
-
December 24, 2012 at 6:59 am #7254AnitaKeymaster
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/
Love coffee, chocolate and my Bella!
December 24, 2012 at 11:13 am #7268RiavonMemberHi 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
December 24, 2012 at 11:15 am #7269AnitaKeymasterHi, 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.
Love coffee, chocolate and my Bella!
December 24, 2012 at 11:59 am #7279RiavonMemberThanks! 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
December 24, 2012 at 12:20 pm #7286AnitaKeymasterThank 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!
Love coffee, chocolate and my Bella!
December 24, 2012 at 12:21 pm #7287AnitaKeymasterOh pooh, the footer is now covering the text on the Android. It's not moving around correctly. :o(
Love coffee, chocolate and my Bella!
December 24, 2012 at 12:31 pm #7291RiavonMemberUgh! 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
December 24, 2012 at 1:08 pm #7305AnitaKeymasterDecember 24, 2012 at 1:24 pm #7307RiavonMemberThere 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
December 24, 2012 at 1:28 pm #7308AnitaKeymasterOkay, 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.
Love coffee, chocolate and my Bella!
December 26, 2012 at 9:38 am #7462AnitaKeymasterRia, 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/
Love coffee, chocolate and my Bella!
December 26, 2012 at 1:05 pm #7516AnitaKeymasterThis 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.
Love coffee, chocolate and my Bella!
-
AuthorPosts
- The topic ‘Stretch Theme: Responsive Background Image’ is closed to new replies.