• 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 theme images

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 › Infinity theme images

This topic is: not resolved

Tagged: infinity, mobile, responsive

  • This topic has 4 replies, 2 voices, and was last updated 5 years, 11 months ago by Boblebad.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • January 21, 2017 at 4:02 pm #199772
    abbypanda
    Member

    On the front page, I'm having some trouble. The first image resizes for all mobile devices and looks great. The others do not and this is annoying: it causes them to not look good.
    Please help me out. I want to insert a code to make all the background front page images resize for the device like the first image does. Starting with the dog with the sweater down, they dont and you cant read them on mobile
    http://www.ArkansasPet.Photography

    http://www.ArkansasPet.Photography
    January 21, 2017 at 8:36 pm #199775
    abbypanda
    Member

    *to clarify widgets 1, 3, 5, 7 I want the background images to be fix width, that resize and maintain the whole image no matter what device you are on. I do not want the widget text area resized depending on what text is there.

    January 23, 2017 at 8:48 pm #199909
    abbypanda
    Member

    anyone???

    January 25, 2017 at 7:03 pm #200032
    abbypanda
    Member

    ?

    March 7, 2017 at 2:53 pm #202662
    Boblebad
    Participant

    It's not easy, be course if you wanna "contain" the image, then it will only fit one screen size according to where it is widest or highest.

    I just tried be course i thought i could be cool too, but it does not work. You can use the "contain" value on background-size, but when going from your big laptop screen to your smartphone, you're left with a lot of empty space that's filled with the background color of the page. And that does not look good in my opinion.

    I just took the CSS from the "Front Page Sections" section in the style-front.css and put in under Media at the bottom:

    
    .front-page-1,
    .front-page-3,
    .front-page-5,
    .front-page-7,
    .front-page-9 {
    	background-position: center center;
    	background-repeat: no-repeat;
    	-webkit-background-size: contain;
    	-moz-background-size:    contain;
    	background-size: contain;
    }

    I'm not sure about the webkit's "contain", but it shows the result anyway 🙂

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 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