Background image on mobile devices for obsidian theme

  • Unknown's avatar
    gbottamini · Member ·

    Hello,

    I have the obsidian theme and wondered if there is any CSS that could help my background image show on iPad and iPhone devices? I indicated in the CSS that I wanted the code to apply to mobile devices and indicated that my full size image is 1100px. What else can I do so that the background essentially shrinks to fit those devices? My image is not centered, so while it looks good on a desktop, it’s oddly cut off on other devices.

    Thank you so much for your help!

    Gina

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    siobhyb · Member ·

    Hi Gina,

    Obsidian is designed to support a large custom background image that spans the entire width and height of a screen, as such edges of the image may indeed get cropped on smaller screen sizes.

    Custom backgrounds that work best with Obsidian are therefore more flexible, decorative or abstract, so they can handle some sort of cropping.

    You could experiment with different values for background-size and background-position in your custom CSS but there isn’t a perfect solution here.

    For example, the following would ensure the image takes up 100% of the screen’s width but would also crop it at a certain height on smaller screens: 

    .background-cover .obsidian-background-overlay {
    background-size: 100%;
    background-position: 0 0;
}

    As an alternative to setting a background image, you could try setting a Front Page Logo logo via the Theme Options panel of the WordPress.com Customizer. The logo feature is meant for images like yours, that can’t tolerate cropping.

    Let me know if the above information is useful or if you have any further questions.

  • Unknown's avatar
    gbottamini · Member ·

    Thank you!! I added the code and it looks great when my device is turned sideways… Is there a way to add a “pop up” screen that appears when a mobile device is held in “portrait mode” that says “This site is best viewed in landscape mode, please rotate your device” ?

    Thank you again!

  • Unknown's avatar
    siobhyb · Member ·

    Hi Dustin,

    It’s not possible to create a pop up but Media Queries can be used to target devices of a certain size. You can read more about Media Queries here:

    https://en.support.wordpress.com/custom-design/custom-css-media-queries/

    Can you let me know a little about what you dislike about the way your site looks in portrait mode? Did the background look OK in that mode prior to the CSS I provided?

  • The topic ‘Background image on mobile devices for obsidian theme’ is closed to new replies.