• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Parallax Pro Background Image Responsiveness

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Parallax Pro Background Image Responsiveness

This topic is: not resolved

Tagged: images, parallax, responsive

  • This topic has 16 replies, 12 voices, and was last updated 7 years, 5 months ago by Sher.
Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • September 9, 2014 at 7:39 pm #123673
    Dan
    Member

    Hi everybody,

    I'd like the background images in my featured images section on the homepage of my website to be responsive. Right now, on a mobile device, it just shows a very small square of my photo rather than adjusting the size to incorporate all or most of the picture.

    Any way to solve that?

    Thanks.

    http://www.manifestancestry.com
    September 18, 2014 at 9:32 am #124909
    jrricker
    Member

    Hey Dan, how do you get the transparent background behind the text and I'm front of the background photo on your site?

    Can you send the code that makes that possible?

    Thanks,
    JR

    September 18, 2014 at 11:27 am #124921
    Jason Weber
    Member

    Hey jrricker.

    This can be accomplished by adding the following to your style.css (or, preferably, if you have a plugin that allows for custom CSS):

    .home-odd .wrap {
    background: rgb(40, 80, 229) transparent; /* whatever color you choose */
    background: rgba(40, 80, 229, 0.4); /* change the opacity -- 0.3 would be lighter, 0.6 would be darker */
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#2850e5, endColorstr=#2850e5) ;
    -ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#2850e5, endColorstr=#2850e5)” ;
    }
    

    This way, it's cross-browser compatible with a fallback for IE8 and below.

    Hope this helps!


    Webby’s WebPrezence
    National Center For Due Process

    October 3, 2014 at 1:21 am #126628
    rayman
    Participant

    Did anyone have a solution to the original question - to make the background images responsive?

    October 10, 2014 at 5:11 pm #127426
    braderz31
    Member

    Not sure if anyone still needs to do this but I was able to amend the positioning of my background images with this media query

    @media only screen and (max-width: 1140px) {
    
    	.home-section-1,
    	.home-section-3,
    	.home-section-5 {
    		background-size: cover;
    		background-position: left;
    		
    	}
    }

    Obviously you can amend the background size and position to suit.

    November 9, 2014 at 8:22 pm #131016
    TheRealCaseyChoate
    Member

    I desperately need a fix for this. I used only pictures on my home page and put a lot of time and effort into it. I tried braderz31's suggestion, but it doesn't work. It still only shows a small portion of the image instead of shrinking the whole image.

    Any help would be greatly appreciated.

    http://TheRealCaseyChoate.com

    December 11, 2014 at 9:42 am #134275
    ceah
    Member

    Sridhar shows how to do this in the Minimum Pro theme

    http://sridharkatakam.com/setting-responsive-image-place-background-minimum-pro/#comment-339437

    I just asked him how to apply this to Parallax Pro. If he answers, I will link to it for you.

    December 13, 2014 at 12:12 am #134441
    Dan
    Member

    That'd be great. I appreciate it.

    April 12, 2015 at 3:02 pm #147609
    spiezz
    Participant

    Hi,

    I've implemented the @media code and still no response. I tried to use the info on the Minimum Pro theme page, but the php didn't match exactly so I was hesitant for fear of breaking the site.

    Background images for the .home-odd sections do not respond/resize on mobile.

    Did anyone on this thread actually find a solution or just abandon parallax pro?

    Thanks
    Karen
    piKziL.com

    April 22, 2015 at 7:26 pm #148853
    blogwithben
    Member

    Hi there,

    I'd LOVE for my home section images to be responsive as well. Is there any update on this?

    Thanks,

    Ben

    June 24, 2015 at 7:21 am #157386
    mocherob
    Member

    I need this as well. I've sent a support ticket to StudioPress. They sent me a first response really side-stepping the issue basically suggesting that I change the image and set an out of focus image as the background, one with no true focal point. Well I want to make my image responsive. They have not yet responded to my follow up question. So no fix here on that yet?

    June 28, 2015 at 7:03 pm #157790
    davidd
    Member

    Thanks for keeping this issue at the top of the list. This seems to be a common one. I've seen it in at least 15 other posts with no solution. braderz31's idea is as close as I can get, but it doesn't work on phones. Any heroes out there?

    Even a snippet for replacing the images on smaller screens would be nice, but it would be better if some good 'ol (new) css would do the trick.

    June 28, 2015 at 8:57 pm #157792
    Dan
    Member

    Still no progress that I've heard of. Disappointed in StudioPress. This is clearly a significant issue for a lot of people--should be addressed.

    June 28, 2015 at 9:34 pm #157793
    davidd
    Member

    Here are some hints about the issue. https://css-tricks.com/forums/topic/full-page-backgrounds-on-ios-background-size-cover/

    June 28, 2015 at 10:31 pm #157795
    davidd
    Member

    Holy Toledo, I played and played and this is what I did that worked for my case. I'm sure this shows the clown shoes, but it seems to be working okay.

    
    @media only screen and (max-width: 768px) {
    	.home-section-1,
    	.home-section-3,
    	.home-section-5 {
    		background-attachment: scroll;
    		background-position: top;
    		-webkit-background-size: 200% contain;
    		-moz-background-size: 200% contain;
    		background-size: 200% contain;
      	}
    }
    
    June 28, 2015 at 10:38 pm #157796
    davidd
    Member

    Heres' the site http://emily.viewfarm.com/

    I also did this totally goofy thing that seems to have worked.

    @media only screen and (max-width: 1140px) {
    	.home-section-1,
    	.home-section-3,
    	.home-section-5 {
    		background-attachment: scroll;
    		background-position: top;
    		-webkit-background-size: auto contain;
    		-moz-background-size:    auto contain;
    		background-size:         auto contain;
      	}
    }
    
    October 7, 2015 at 9:18 am #167615
    Sher
    Participant

    Well I got my own Frankenstein thing going on after reading this thread. This is working for me, at least it's good enough so I can move on...

    Placed this inside any @media sections needed...

    .home-odd {
    background-attachment: scroll;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    background-size: 100%;
    -o-background-size: 100%;
    background-height: 100%;
    background-width: 100%;
    background-position: top;
    background-repeat: no-repeat;
    background-color: #333;
    }

  • Author
    Posts
Viewing 17 posts - 1 through 17 (of 17 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble