Support » Fixing WordPress » Background Image Responsive Alignment

  • Hi there,

    When viewing my website on a mobile device the background image shown is the middle part of the full background image that is displayed on a PC.

    Is there any way to get the responsive mobile and tablet image to display the left hand side of my full image?

    I am using Zerif Lite theme on wordpress 4.4.2

    My web page: http://www.cuidamicasa.xyz

    Thank you very much for the help, Richard

Viewing 4 replies - 1 through 4 (of 4 total)
  • Hi,
    You can adjust the position of your image using the CSS background-position property on the body element with custom background. It is set like this now:

    body.custom-background {
        background-position: top center !important;
    }

    If you change center to left then you’ll see more of the left part of the image (and actually the first one should be the horizontal and the second one the vertical position):

    body.custom-background {
        background-position: left top !important;
    }

    You can also fine tune this by using percentages (0 for top and choose the correct one for the horizontal position):

    body.custom-background {
        background-position: 20% 0 !important;
    }

    If you only want this for small screens, you should wrap it in a media query that defines the max. screen size this style is applied to, like this:

    @media screen and (max-width: 480px) {
        body.custom-background {
            background-position: 20% 0 !important;
        }
    }

    I mustn’t forget: you should apply this to your style.css file (at the end) in a child theme or in your theme if it allows custom CSS.

    Hey Csaba! thank you so much for your input. Unfortunately I am very new to all this and only really understand about half of what you told me!

    Where do I find the style.css file to drop in …

    body.custom-background {
    background-position: left top !important;
    }

    Or alternatively can you suggest a page on here that talks about these things!

    Thank you! Richard

    OK so I found the style.css file in the editor section of the appearance tab.

    It tells me that i shouldn´t play with the coding here!!

    Do i literally just copy and paste your code

    body.custom-background {
    background-position: left top !important;
    }

    at the bottom of the window and click update file?

    Thank you very much. Richard

    HI Csaba! so I just jumped right on in and gave it a go and it worked a treat! Exactly what I was looking to achieve, especially the % shift, with this I was able to fine tune which bit of the image is displayed. Thank you so much for your help.

    All the best, Richard

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Background Image Responsive Alignment’ is closed to new replies.