Infinity Pro – Frontpage (Home) Background images not responsive

[Junglepilot]

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

[Derek]

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

[Gary10]

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

[Derek]

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

[Gary10]

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

[santiagonas]

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.
https://electricista.barcelona

[santiagonas]

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.
https://electricistabarcelona.barcelona/

[Author]

Posts