• 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

Infinity Pro – Frontpage (Home) Background images not responsive

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 › General Discussion › Infinity Pro – Frontpage (Home) Background images not responsive

This topic is: not resolved

Tagged: background images, Infinity Pro, responsive home page, responsiveness

  • This topic has 6 replies, 4 voices, and was last updated 5 years, 1 month ago by santiagonas.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • January 26, 2018 at 8:51 am #215755
    Junglepilot
    Member

    Is there any way to make the homepage background images responsive? This is an issue. I have checked with a few other child theme developers on Theme Forest who use the full sized images as backgrounds and several are responsive.

    With the Infinity Pro (and several other similar SP child themes) all you see is the very center of the image on a smartphone or tablet. Interior page images are all responsive, just not the full size (1600x1100) homepage background images. It can be done but I'm not a php genius.

    What code do we need to add and where? You need to address this concern.

    Any ideas?

    Thanks

    https://www.toomerscoffee.com
    January 26, 2018 at 4:47 pm #215769
    Derek
    Member

    Hi Junglepilot,

    If I'm understanding you correctly, the two background images on your homepage (with people in them) are displaying exactly how the code is telling them, and are as responsive as they are going to be in that situation.

    The way those background images are designed to display is to "cover" the entire .front-page-1 and .front-page-3 DIVs (if that makes sense). This works fine on desktops, but on the mobile device those particular DIVs have enough content to make them quite long, and the CSS is telling those images to cover/fill that entire area (even if only a fraction of that area is visible on the screen).

    Does that make sense?

    The only solution I can think of to "see more of the image" would be to modify the CSS for those particular DIVs (when displayed on mobile devices) to have a background-attachment of "fixed." This will fit the image to the actual browser/window size, but it will not scroll with the content (the content will scroll over top of the image).

    If you add something like this to your CSS you'll be able to see what I mean:

    @media only screen and (max-width: 768px) {
    .front-page-1, .front-page-3, .front-page-5, .front-page-7 {
    background-attachment: fixed;
    }
    }

    I'd be curious to see what Theme Forest themes exhibit the behavior you're interested in achieving - it may help get me on the same page.


    5.12 Design Lab
    WordPress Websites built on the Genesis Framework
    512designlab.com

    January 29, 2018 at 8:16 am #215818
    Gary10
    Member

    @Derek, I'm confused. My understanding is images are saved in different sizes to scale for different screen types.

    January 29, 2018 at 9:22 am #215821
    Derek
    Member

    The different image sizes that WordPress generates is so that theme developers can specify what size images get used in certain places throughout the site (for example, showing a small thumbnail image for a post on the homepage or in a sidebar, and showing the full-size image on the single post page). So far as I'm aware, WordPress, by default, does not dynamically select and display different images based on screen size. While it would probably be possible to do so with some Javascript, I don't believe it's common practice.

    All that being said, it wouldn't affect the issue you are asking about. Background images are designed to completely fill the background of the widget-area they are assigned to. On a large monitor, your widget area may (for example) be 1600x1280 pixels, an area that is easily filled by the background image. On a mobile device, that widget area may now be 640x2500 pixels, meaning you're only going to see a small sliver of the background image.


    5.12 Design Lab
    WordPress Websites built on the Genesis Framework
    512designlab.com

    January 29, 2018 at 4:01 pm #215845
    Gary10
    Member

    Fixed: I'm experimenting with Infinity Pro for a few domains; started with two. I had a problem with one install, but not the other. I removed Genesis and Infinty Pro including the databases and reinstalled, both responding properly"

    USGJ.com
    WordPhile.com

    January 29, 2018 at 5:43 pm #215851
    santiagonas
    Member

    Todos nuestros electricistas estan certificados efectuando con exito todo el proceso de certificacion establecido en la normativa en vigor, estando capaces para abordar todo tipo de trabajos electricos, así como a producir el certificado boletin electrico pertinente a la finalizacion de la obra instalacion.

    Electricistas Barcelona

    January 29, 2018 at 5:44 pm #215852
    santiagonas
    Member

    Nuestros instaladores especializados pueden realizar, arreglar mantener cualquier tipo de instalación eléctrica en viviendas, empresas, oficinas garajes aun jardines. Nuestro principal compromiso como electricistas profesionales es brindar a nuestros clientes, tecnología avanzada, materiales certificados, costes razonables, cumplimiento en el plazo establecido y alta calidad en el servicio. Cualquier electricista autorizado de Barcelona, desde hace meses, recibe cada semana una dos consultas de sus clientes sobre los cambios que deberían hacer en sus instalaciones a fin de rebajar el importe del recibo mensual de la luz.

    Electricistas Barcelona

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘General Discussion’ 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