selecting which part of the header image shows in mobile

  • Unknown's avatar
    ericmesa · Member ·

    For my site http://www.ericsbinaryworld.com I switched to the Twenty Fifteen theme. For the “header” image (which actually is the sidebar invade in this theme) I selected an image that was the recommended size. I like how it looks on desktop. But on mobile I don’t like the part of the image where they cropped it.

    So, by editing the CSS how could I effectively lower the image? In concrete terms, it’s a photo of me, but in mobile only shows my chin. If I could move it so that it does my face, the site should be perfect in both desktop and mobile.

    Additionally, if you could point me in the right direction for potentially increasing the heart image by just a bit, that should help in case my first question let’s me move the image, but I need to show more.

    I’m comfortable messing with CSS but don’t know which part to add to my custom CSS file to fix it.

    Thank you.

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

  • Unknown's avatar
    thesacredpath · Member ·

    Hi @ericmesa, it looks like you are using WordPress but you are not hosted here at WordPress.com. For self-hosted WordPress sites such as yours using Twenty Fifteen, I would suggest asking for help in the Twenty Fifteen Support Forum at WordPress.org.

    For general questions on self-hosted WordPress.org installations, visit http://wordpress.org/support/.

    The differences between WordPress.com and WordPress.org.

    I did take a quick look at your site, and you can change the background position of the header with the following CSS. The second number, 30% is the vertical positioning. 30% seems to work pretty well, but you can adjust. 

    .site-header {
    background-position: 50% 30% !important;
}

    If you have not yet done so, I would suggest creating a child theme so that any customizations you make will not be overwritten by a future theme update. Alternately you can use the Edit CSS function in the Jetpack plugin, or use one of the other Custom CSS plugins that will keep CSS changes from being overwritten.

    Child Themes
    Child Theme creation plugins
    Jetpack plugin
    Custom CSS plugins

  • Unknown's avatar
    ericmesa · Member ·

    Sorry about that – I posted the question on my phone and didn’t realize I was on WP.com instead of WP.org. That said, you perfectly solved it for me. It works as I want for mobile and stayed the way it was for default on desktop.

    Thank you!

  • Unknown's avatar
    thesacredpath · Member ·

    Super, and you are welcome.

  • The topic ‘selecting which part of the header image shows in mobile’ is closed to new replies.